SVGアニメーションを実装する時の手引き

イラレのSVGデータから線をなぞったようなアニメーションを実装するときに調べたものと手順を記載します。

See the Pen MRWeBK by Susumu Seino (@susumu) on CodePen.0

vivusというSVGアニメーションが簡単に実装できるライブラリを利用しますまずは描写に使うSVGをイラレを使いコードを書き出し、不要なタグを削除します。上記のサンプルのようにCDNでvivus.jsを読み込んだら最下部に動作用のJSを書き描写が終わったらCSSでafter-fillクラスを付与し、ゆっくり最後の塗りを表現します。気が向いたらあとでちゃんと加筆する。

参考URL

SVGとVivus.jsを使ってペンで描画する様なアニメーションを作る方法 | 株式会社チップディップ

SVGをillustratorで書き出して表示する方法 | トーテックビジネスサポート株式会社 ウェブチームブログ

https://ics.media/entry/15970/