[Vivus Instant] SVGの手書き風テキストアニメーションを超簡単に作成する。

### はじめに プログラミングスクールの課題のECサイトを作っています。SVGの手書き風テキストアニメーションに憧れがありましたが、課題納期等の関係で学習時間をあまり確保できない状況でした。[vivus.jsを利用したテキストアニメーション](http://maxwellito.github.io/vivus/)というところまでは辿りつきましたが、使っているドローソフトの設定がいけないのかvivus.jsがなかなか思ったような動作をしてくれない！諦めか！と思っていたところvivusが超簡単なものを用意してくれていました！これならすぐ作成可能ですし、デモということであれば100点な動きをしてくれると思います。

使用したもの

Vivus instant　https://maxwellito.github.io/vivus-instant/
Inkscape

①Inkscapeで.svgを作成する。

今回はECサイトで会計後のサンクスページに表示されるものをテーマに作成していきます。表示されているファイルはテキストで記述したレイヤーをなぞるように新しいレイヤーでペンツールを使ってパスを1角ずつ、順番に書いていきます。ストロークの設定で文字を太くしています。

②Vivus instantで作成したファイルを読み込んで調整・保存

.svgを読み込んだら以下のオプションに設定しUpdateします。

Animation type - One By One

Download で保存して終了

---

手書き風テキストアニメーション完成です！ロゴなどで作ってみると映えそうです！