どうもこんばんは。Toshikuraです。久しくTipsを書いていなかったのですが地味に便利でしたので【TweenLiteを使用して SVG polygon を任意の形状へ変形(アニメーション)させる方法】をメモしておきます。今回のTipsでは TweenLite(Gsap)を使用します。 SVGのpolygon(もしくはpolyline)はSVG内のXY座標をpoints=”X1,Y1 X2,Y2 …”と指定し、点と点と繋ぐ事で図形を描写しています。 <a id="onChangeByTM" href="#">HOVER</a> <svg viewBox="0 0 158.5 183" width="200px"> <polygon id="poly" points="0,45.8 79.2,0 158.5,45.8 158.5,137.3 79.2,183 0,137.3"/> </s