SVG animation(morphing) onClick

Vote count:

0

I have followed the tutorial from this page: http://ift.tt/1q0IEPx

The two shapes just blink between each other. Does anyone know why they dont animate / morph to each other?

for some reason my fiddle is not doing anything but the svg code is the same... I basically downloaded the html / svg files from the tutorial above and posted in my svg code

http://ift.tt/1k5heJb

<path  stroke="deepskyblue" stroke-width="15" d="M20.553,16.551c-0.955,0-1.84,0.313-2.559,0.826c-0.083-0.045-8.388-4.366-8.388-4.366S17.76,8.759,17.9,8.694
c0.742,0.559,1.654,0.903,2.653,0.903c2.445,0,4.426-1.983,4.426-4.425c0-2.443-1.981-4.423-4.426-4.423
c-2.443,0-4.422,1.979-4.422,4.423c0,0.054,0.023,0.148,0.015,0.158C16.137,5.339,7.891,9.625,7.829,9.66
C7.073,9.104,6.176,8.756,5.176,8.756c-2.445,0-4.426,1.98-4.426,4.423c0,2.446,1.981,4.426,4.426,4.426
c1.117,0,2.104-0.422,2.905-1.111c0.255,0.147,8.022,4.17,8.077,4.205c-0.002,0.033-0.027,0.183-0.027,0.278
c0,2.441,1.979,4.423,4.422,4.423c2.445,0,4.426-1.981,4.426-4.423C24.979,18.53,22.998,16.551,20.553,16.551z">
<animate dur="&animDuration;" repeatCount="indefinite" attributeName="d" values="M20.553,16.551c-0.955,0-1.84,0.313-2.559,0.826c-0.083-0.045-8.388-4.366-8.388-4.366S17.76,8.759,17.9,8.694
c0.742,0.559,1.654,0.903,2.653,0.903c2.445,0,4.426-1.983,4.426-4.425c0-2.443-1.981-4.423-4.426-4.423
c-2.443,0-4.422,1.979-4.422,4.423c0,0.054,0.023,0.148,0.015,0.158C16.137,5.339,7.891,9.625,7.829,9.66
C7.073,9.104,6.176,8.756,5.176,8.756c-2.445,0-4.426,1.98-4.426,4.423c0,2.446,1.981,4.426,4.426,4.426
c1.117,0,2.104-0.422,2.905-1.111c0.255,0.147,8.022,4.17,8.077,4.205c-0.002,0.033-0.027,0.183-0.027,0.278
c0,2.441,1.979,4.423,4.422,4.423c2.445,0,4.426-1.981,4.426-4.423C24.979,18.53,22.998,16.551,20.553,16.551z; M17.491,19.042c-0.382,0-0.765-0.146-1.057-0.438s-6.915-6.936-6.937-6.936
c-0.022,0-6.354,6.354-6.937,6.936c-0.581,0.582-1.529,0.584-2.113,0c-0.584-0.583-0.576-1.537,0-2.114
c0.576-0.576,6.936-6.909,6.936-6.936c0-0.028-6.356-6.356-6.936-6.936s-0.584-1.53,0-2.114c0.584-0.583,1.536-0.578,2.113,0
C3.14,1.082,9.259,7.201,9.306,7.248C9.352,7.294,9.482,7.44,9.498,7.44c0.015,0,6.356-6.356,6.937-6.937s1.53-0.584,2.114,0
c0.583,0.583,0.587,1.526,0,2.113c-0.588,0.588-6.937,6.916-6.937,6.937c0,0.021,6.358,6.358,6.937,6.936
c0.577,0.578,0.583,1.53,0,2.114C18.256,18.896,17.874,19.042,17.491,19.042z"/> 

there should be the same amount of points on both svg, 18points each and all points are the same I went through both illustrator files and made them all curvy.

asked 54 secs ago

mike

155