カブトムシを様々な種類にトランスフォームさせたくなったときの簡単なTIPS

【 完成形 】

See the Pen MWKXrmO by daisukeibi (@daisukeibi) on CodePen.

まず初めにGSAPのライブラリを読み込む。

index.html

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=2314"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script>

使いたいSVGをダウンロードしてコードエディタで開き、
svgタグのviewBoxとpathタグのd属性をコピーして貼り付ける。

index.html

<svg id="svg" viewBox="（viewBox属性を貼り付ける）" fill="#4F392B">
  <path id="icon1" d="（一匹目のカブトムシのd属性を貼り付ける）">
  <path id="icon2" d="（二匹目のカブトムシのd属性を貼り付ける）">
  <path id="icon3" d="（三匹目のカブトムシのd属性を貼り付ける）">
</svg>

cssで初期表示しないpath要素を隠す。

style.css

#icon2,#icon3{
visibility: hidden;
}

jsで動かす。

script.js

var tl = gsap.timeline({repeat:-1});

tl.to("#icon1", 1,{
  morphSVG: "#icon2"
}).to("#icon1", 1,{
  morphSVG: "#icon3"
}).to("#icon1", 1,{
  morphSVG: "#icon1"
})

以上で完成です！

morphSVGPluginは有料ですが、他にもAnime.jsやsnap.svgなど無料で使えるのもいっぱいあるので、「SVG モーフィング」で調べてみてください。（モーフィング時の滑らかさとか実装の難しさに差があって面白いです）

JS苦手な方や手っ取り早く動かしたいという方には短い記述で簡単に実装できるので、有料にはなりますがmorphSVGPluginがおすすめです。

---

使用ライブラリ：https://greensock.com/morphsvg/