jQuery DrawSVGを使ったSVGアニメーションのデモ

細かい指定なしのシンプルな実装

四角も螺旋も同時にアニメーションが開始されるため、スマホだと分かりづらいです。

sample01.四角

sample02.螺旋

オプションで動きを調整してみた

アニメーションが完了した後、フェードアウトします。
2020.07.23追記：消えた後、上に詰まらないようにしました。

sample03.四角'

sample04.螺旋'

テキストのアウトラインしたSVGで試してみた

イラレで図形のアウトラインを取ってpath化したもの

SVG（polyline）を気合いでpathに書き変えたもの

複数のパスがある場合

sample05.デフォルト

584_me_h

sample06.1本ごとにアニメーション

584_me_h

イラレでSVG書き出し実験

イラレでSVG書き出し実験:失敗ver

lineはDrawSVGでアニメーションにならず、最初から表示される。