Snap.svgを使ったSVGモーフィングアニメーション(clippathバージョン有り) 2016/4/6 2016/6/2 Animation, JS/jQuery svgモーフィングアニメーションとは 以前SVGのアウトラインをアニメーションさせる記事を書きましたが、今回はSVGの塗りの部分が変形するアニメーションをやってみたいと思います。 前回のラインアニメーションはsvgのstroke-dashoffsetというプロパティーを操作してアニメーションさせる方法でしたが、今回は直接pathの値をいじってアニメーションさせる手法です。例えば印象的なサンプルサイトでいうと下記のようなサイトがあります。 Metamorphosis https://bonnemarque.se/ また下記のようなアイコンアニメーションのプラグインもあります http://alexk111.github.io