通常SVGのモーフィングアニメーションといえばCSSで動かすにしろ、jsで動かすにしろ、元のSVGの頂点の数を次のSVGの頂点の数に合わせなければ、スムーズなアニメーションにはならないです。
flubberは簡潔な記述で、その問題を解決し、スムーズなSVGモーフィングアニメーションを実行できます。
flubberのライセンスは、MIT LicenseなのでSVGモーフィングアニメーションを使いたい時は、こちらを使った方がお得そう。
flubberの使い方
上記Githubページからzipファイルをダウンロードするかnpm installする。
使用したいページに以下を記述(D3.jsを使うのが一番簡潔な書き方になりそうなので、同時にD3.jsも読み込む。topojsonは地図データを使いたい時に任意で読み込めばいい。)
また、D3.jsだけでなく様々なライブラリとの互換性もあり、ライブラリを使用しなくても動く。
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<script src="../build/flubber.min.js"></script>
HTMLとCSS,js部分はcodepenのソースを確認してください。
他にcodepenである作品では、以下のものが分りやすい。こちらの例ではSVGのパスをjsコードの中に記述している。
