SVG の path 要素を Canvas や DOM のアニメーションなどに利用する

SVG の path 要素からは、
getTotalLength でパスの全長、
getPointAtLength(n) でパス上の n 地点における位置情報を取得できる。

これができると、複雑な図形の形に沿って Div を配置したり、文字のアウトラインのパスに沿ってペンを動かしたりといったアニメーションを作る際に細かい座標の計算や調整の手間が省ける。

DEMO

Sketch.app で作成した SVG のパスにあわせて Div を這わせてみました

See the Pen lGvin by turusuke (@turusuke) on CodePen.

参考：Advanced animation path

上記のサイトでは応用デモ、解説が掲載されているので大変参考になりました。

応用例

クリックするとハートのパス上に星を配置したものが現れて、星がバラけるようなデモを作ってみました。

See the Pen HizoD by turusuke (@turusuke) on CodePen.

色々なものに応用できそうです。