イラレのSVGデータから線をなぞったようなアニメーションを実装するときに調べたものと手順を記載します。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”MRWeBK” default_tab=”html,result” user=”susumu”]See the Pen MRWeBK by Susumu Seino (@susumu) on CodePen.[/codepen_embed]vivusというSVGアニメーションが簡単に実装できるライブラリを利用しますまずは描写に使うSVGをイラレを使いコードを書き出し、不要なタグを削除します。上記のサンプルのようにCDNでvivus.jsを読み込んだら最下部に動作用のJSを書き描写が終わったらCSSでafter-fillクラスを付与し、ゆっくり最後の塗りを表現します。気が向いたらあとでちゃんと加筆する。