SVGのPathをアニメーション化してくれる大人気jQueryプラグイン「DrawSVG」

Pathを書こう

基本的なPathの動きは全てHTMLに書かれている。
以下のHTMLタブを参考にしてみるといいだろう。

シンプルな使用法

See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen.

スクロールでPathを移動する。

See the Pen Draw on scroll by Leonardo Santos (@lcdsantos) on CodePen.

イメージのMaskPathをアニメーション化する。

See the Pen Animate mask path by Leonardo Santos (@lcdsantos) on CodePen.

その軽さ2キロバイト以下という軽量化ぶり。1年前は1キロバイト以下だったんだけども、少しずつ機能が追加されていますね。それでも十分な軽さです。

お試しあれ。

それでは、また。