はじめに
プログラミングスクールの課題のECサイトを作っています。SVGの手書き風テキストアニメーションに憧れがありましたが、課題納期等の関係で学習時間をあまり確保できない状況でした。vivus.jsを利用したテキストアニメーションというところまでは辿りつきましたが、使っているドローソフトの設定がいけないのか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 で保存して終了
手書き風テキストアニメーション完成です！ロゴなどで作ってみると映えそうです！