SVG 变形金刚（鼠标点击触发变形动画）- 哮天犬 - 踏得网

参考教程: https://css-tricks.com/svg-shape-morphing-works Source: http://species-in-pieces.com

svg, 模型

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3146
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<svg id="morphin-time" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
    <g id="yellow-ranger">
        <polygon id="path-01_1_" fill="#F4C515" points="258.895,90.591 306.244,83.626 261.214,119.371 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="20.619,187.062 29.254,170.728 84.587,166.728 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="258.895,90.591 306.244,83.626 261.214,119.371 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C51A" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C515" />
        </polygon>

<polygon id="path-02_1_" fill="#F4C515" points="351.736,131.441 313.672,85.483 357.309,94.305 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="28.253,230.562 10.753,214.062 25.253,212.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="351.736,131.441 313.672,85.483 357.309,94.305 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C51A" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C515" />
        </polygon>

<polygon id="path-03_1_" fill="#E1AE25" points="356.148,134.461 255.877,122.391 310.654,79.682 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="28.753,235.562 20.619,187.062 43.587,192.395 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="356.148,134.461 255.877,122.391 310.654,79.682 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#FFF8E9" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#E1AE25" />
        </polygon>

<polygon id="path-04_1_" points="350.811,133.531 339.436,164.401 260.751,158.83 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="75.253,224.562 30.92,228.728 37.753,210.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="350.811,133.531 339.436,164.401 260.751,158.83 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C51A" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="350.811" />
        </polygon>

<polygon id="path-05_1_" points="260.751,158.83 260.751,123.085 350.811,133.531 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="43.587,192.395 20.619,187.062 80.254,167.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="260.751,158.83 260.751,123.085 350.811,133.531 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#E1AF26" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="260.751" />
        </polygon>

<polygon id="path-06_1_" fill="#FBF4DB" points="283.73,191.094 274.214,169.509 325.277,173.222 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="43.587,192.395 80.254,167.062 99.253,233.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="283.73,191.094 274.214,169.509 325.277,173.222 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C51A" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FBF4DB" />
        </polygon>

<polygon id="path-07_1_" fill="#FBF4DB" points="328.062,170.436 315.064,193.184 281.641,191.327 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="99.253,233.562 89.253,243.062 75.253,224.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="328.062,170.436 315.064,193.184 281.641,191.327 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C51A" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FBF4DB" />
        </polygon>

<polygon id="path-08_1_" fill="#F4C515" points="254.484,171.364 250.307,158.83 347.096,174.149 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="37.753,210.062 43.388,192.062 99.253,233.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="254.484,171.364 250.307,158.83 347.096,174.149 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#D49F29" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C515" />
        </polygon>

<polygon id="path-09_1_" fill="#F4C515" points="347.096,174.149 349.186,165.097 250.307,158.83 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="114.388,171.062 135.253,168.562 129.253,199.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="347.096,174.149 349.186,165.097 250.307,158.83 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C51A" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C515" />
        </polygon>

<polygon id="path-10_1_" fill="#E1AE25" points="291.201,209.264 254.484,171.364 276.767,172.06 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="99.253,233.562 80.254,167.062 114.388,171.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="291.201,209.264 254.484,171.364 276.767,172.06 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#E1AF26" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#E1AE25" />
        </polygon>

<polygon id="path-11_1_" fill="#D49E29" points="250.307,158.83 260.751,123.085 262.376,159.295 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="99.253,233.562 114.388,171.062 129.253,199.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="250.307,158.83 260.751,123.085 262.376,159.295 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#D49F29" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#D49E29" />
        </polygon>

<polygon id="path-12_1_" fill="#E1AE25" points="349.186,165.097 339.436,164.401 350.811,133.531 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="117.753,256.562 89.253,243.062 129.253,199.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="349.186,165.097 339.436,164.401 350.811,133.531 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#E1AF26" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#E1AE25" />
        </polygon>

<polygon id="path-13_1_" fill="#D49E29" points="306.451,210.514 325.277,173.222 347.096,174.149 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="117.753,256.562 128.388,200.562 162.753,199.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="306.451,210.514 325.277,173.222 347.096,174.149 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#D49F29" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#D49E29" />
        </polygon>

<polygon id="path-14_1_" fill="#F4C515" points="311.352,205.251 289.998,205.718 315.064,193.184 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="167.753,288.562 117.753,256.562 162.753,199.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="311.352,205.251 289.998,205.718 315.064,193.184 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#E1AF26" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C515" />
        </polygon>

<polygon id="path-15_1_" fill="#F4C515" points="315.064,193.184 289.998,205.718 283.73,191.094 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="167.753,288.562 176.253,333.062 146.253,274.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="315.064,193.184 289.998,205.718 283.73,191.094 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#010101" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C515" />
        </polygon>

<polygon id="path-16_1_" fill="#F7D157" points="267.018,182.505 297.201,217.764 271.951,227.514 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="161.888,200.062 218.753,177.562 167.753,288.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="267.018,182.505 297.201,217.764 271.951,227.514 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C51A" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#F7D157" />
        </polygon>

<polygon id="path-17_1_" fill="#F7D157" points="293.451,219.764 332.473,187.379 313.672,212.217 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="143.753,388.562 181.753,362.062 170.253,386.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="293.451,219.764 332.473,187.379 313.672,212.217 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#A3A19F" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#F7D157" />
        </polygon>

<polygon id="path-18_1_" fill="#F4C515" points="228.023,284.169 268.451,193.514 273.98,225.678 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="168.753,386.562 197.753,330.562 249.753,332.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="228.023,284.169 268.451,193.514 273.98,225.678 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#7B7974" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C515" />
        </polygon>

<polygon id="path-19_1_" fill="#8C6829" points="297.201,217.764 285.123,203.395 311.352,205.251 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="197.753,330.562 182.253,359.062 167.753,288.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="297.201,217.764 285.123,203.395 311.352,205.251 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#696765" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#8C6829" />
        </polygon>

<polygon id="path-20_1_" fill="#FBDC1E" points="372.164,216.625 364.504,286.955 312.627,212.795 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="204.253,282.062 197.753,330.562 167.753,288.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="372.164,216.625 364.504,286.955 312.627,212.795 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#333333" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FBDC1E" />
        </polygon>

<polygon id="path-21_1_" fill="#FBDC1E" points="228.023,284.169 207.83,210.359 267.715,195.04 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="204.253,282.062 169.753,287.562 194.753,224.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="228.023,284.169 207.83,210.359 267.715,195.04 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#010101" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FBDC1E" />
        </polygon>

<polygon id="path-22_1_" fill="#FFFFFF" points="313.951,280.514 262.605,339.411 228.023,284.169 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="248.753,303.562 197.753,330.562 203.253,284.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="313.951,280.514 262.605,339.411 228.023,284.169 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#010101" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FFFFFF" />
        </polygon>

<polygon id="path-23_1_" fill="#8C6829" points="372.164,216.625 313.701,212.764 332.473,187.379 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="249.753,332.062 197.753,330.562 248.753,303.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="372.164,216.625 313.701,212.764 332.473,187.379 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#8A8885" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#8C6829" />
        </polygon>

<polygon id="path-24_1_" fill="#F4C515" points="313.672,212.217 310.424,281.851 273.98,225.678 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="225.753,243.062 202.753,287.062 192.753,225.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="313.672,212.217 310.424,281.851 273.98,225.678 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#333333" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C515" />
        </polygon>

<polygon id="path-25_1_" fill="#F4C515" points="119.841,261.317 210.615,221.5 226.451,277.514 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="192.753,225.062 218.753,177.562 317.753,212.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="119.841,261.317 210.615,221.5 226.451,277.514 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#D49F29" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C515" />
        </polygon>

<polygon id="path-26_1_" fill="#FBF4DB" points="163.265,242.39 114.521,149.082 164.657,154.652 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="265.253,266.562 192.753,225.062 232.753,221.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="163.265,242.39 114.521,149.082 164.657,154.652 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#010101" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FBF4DB" />
        </polygon>

<polygon id="path-27_1_" fill="#FFFFFF" points="310.424,281.851 228.023,284.169 272.951,223.514 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="247.253,303.562 203.253,284.562 225.753,243.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="310.424,281.851 228.023,284.169 272.951,223.514 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#696765" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FFFFFF" />
        </polygon>

<polygon id="path-28_1_" fill="#FFFFFF" points="108.951,265.369 114.521,149.082 163.265,242.39 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="248.753,303.562 225.753,243.062 265.253,266.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="108.951,265.369 114.521,149.082 163.265,242.39 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#010101" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FFFFFF" />
        </polygon>

<polygon id="path-29_1_" fill="#E1AE25" points="364.504,286.955 306.709,356.588 313.672,212.217 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="265.253,266.562 232.753,221.062 317.753,212.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="364.504,286.955 306.709,356.588 313.672,212.217 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#E1AF26" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#E1AE25" />
        </polygon>

<polygon id="path-30_1_" fill="#FBF4DB" points="181.369,384.441 260.751,338.484 313.672,355.196 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="248.753,303.562 265.253,266.562 365.253,310.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="181.369,384.441 260.751,338.484 313.672,355.196 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#333333" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FBF4DB" />
        </polygon>

<polygon id="path-31_1_" fill="#FBDC1E" points="310.424,281.851 307.405,353.803 262.605,339.411 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="317.753,212.562 363.253,237.562 265.253,266.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="310.424,281.851 307.405,353.803 262.605,339.411 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C51A" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FBDC1E" />
        </polygon>

<polygon id="path-32_1_" fill="#FFFFFF" points="181.369,384.441 313.672,355.196 233.594,401.85 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="265.253,266.562 360.253,283.062 376.253,317.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="181.369,384.441 313.672,355.196 233.594,401.85 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#F4C51A" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FFFFFF" />
        </polygon>

<polygon id="path-33_1_" fill="#8C6829" points="309.885,353.409 364.504,286.955 387.018,391.404 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="265.253,266.562 363.253,237.562 360.253,283.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="309.885,353.409 364.504,286.955 387.018,391.404 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#D49F29" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#8C6829" />
        </polygon>

<polygon id="path-34_1_" fill="#BD912D" points="387.803,392.333 263.536,384.901 313.672,355.196 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="415.753,266.562 317.753,212.562 396.253,206.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="387.803,392.333 263.536,384.901 313.672,355.196 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#E1AF26" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#BD912D" />
        </polygon>

<polygon id="path-35_1_" fill="#D49E29" points="124.414,278.917 118.451,260.514 224.541,277.207 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="360.253,283.062 363.253,237.562 415.753,266.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="124.414,278.917 118.451,260.514 224.541,277.207 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#7B7974" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#D49E29" />
        </polygon>

<polygon id="path-36_1_" fill="#FBDC1E" points="124.27,214.884 140.869,183.898 138.656,245.872 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="415.753,266.562 403.753,228.562 489.253,258.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="124.27,214.884 140.869,183.898 138.656,245.872 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#333333" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FBDC1E" />
        </polygon>

<polygon id="path-37_1_" fill="#EBCE88" points="150.963,153.56 131.233,151.17 148.642,120.532 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="404.253,307.562 360.253,283.062 415.753,266.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="150.963,153.56 131.233,151.17 148.642,120.532 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#E1AF26" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#EBCE88" />
        </polygon>

<polygon id="path-38_1_" fill="#EBCE88" points="178.584,409.509 190.029,386.923 220.668,396.671 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="398.253,360.062 360.253,283.062 404.253,307.562 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="178.584,409.509 190.029,386.923 220.668,396.671 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#8A8885" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#EBCE88" />
        </polygon>

<polygon id="path-39_1_" fill="#FBDC1E" points="221.756,382.352 273.285,344.054 266.322,369.819 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="354.753,382.562 386.253,334.062 398.253,360.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="221.756,382.352 273.285,344.054 266.322,369.819 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#7B7974" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FBDC1E" />
        </polygon>

<polygon id="path-40_1_" fill="#FBDC1E" points="138.656,245.872 140.869,183.898 153.043,215.992 	">
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="points" dur="500ms" to="354.753,382.562 398.253,360.062 394.253,379.062 	" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="points" dur="500ms" to="138.656,245.872 140.869,183.898 153.043,215.992 	" />
            <animate fill="freeze" class="morph-time" begin="indefinite" attributeName="fill" dur="500ms" to="#A3A19F" />
            <animate fill="freeze" class="morph-back" begin="indefinite" attributeName="fill" dur="500ms" to="#FBDC1E" />
        </polygon>

</g>
</svg>

<a href="#" class="morphin-time">morphin time!</a>