본문 바로가기
svg

svg animation; path element morphing --- ex.star

by peach1227 2023. 10. 24.

<svg viewBox="0 0 500 500">
<defs>
<radialGradient id="grad-0" gradientUnits="UserSpaceOnUse" >
<stop offset="0" stop-color="gold"/>
<stop offset="1" stop-color="purple"/>
</radialGradient>
</defs>

    <g transform="translate(0,-50)">
        <path d="" fill="url(#grad-0)">
            <animate attributeName="d" values="
M 224.824 134.075 L 241.48 191.695 L 292.2 192.938 L 251.774 229.792 L 266.464 288.18 L 224.824 253.337 L 183.184 288.18 L 197.874 229.792 L 157.448 192.938 L 208.168 191.695 Z; 
M 224.824 134.075 L 266.464 150.344 L 292.2 192.938 L 292.2 245.586 L 266.464 288.18 L 224.824 304.449 L 183.184 288.18 L 157.448 245.586 L 157.448 192.938 L 183.184 150.344 Z;
M 224.824 134.075 L 241.48 191.695 L 292.2 192.938 L 251.774 229.792 L 266.464 288.18 L 224.824 253.337 L 183.184 288.18 L 197.874 229.792 L 157.448 192.938 L 208.168 191.695 Z
" begin="0" dur="3s" repeatCount="indefinite"/>
        </path>
    </g>

</svg>

반응형