title: How to make my svg path animate smoothly and not step
body: <p>I want the transition between values to be smooth and interpolated but instead it kips from one frame to the next. I've tried setting keyTimes and calcMode but they don't seem to work.</p>
  <pre><code>&lt;svg xmlns:svg=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100%&quot; height=&quot;100%&quot; viewBox=&quot;0 0 300 300&quot; version=&quot;1.1&quot; id=&quot;svg8&quot;&gt;
  
    &lt;g inkscape:label=&quot;Layer 1&quot; inkscape:groupmode=&quot;layer&quot; id=&quot;layer1&quot;&gt;
        
       &lt;path style=&quot;opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke&quot; d=&quot;m 51.777177,27.066689 c 0,0 27.716737,-5.009711 45.71259,5.509349 16.434013,9.606122 18.102413,21.801178 36.991143,17.622614 18.88873,-4.178563 34.11595,6.82428 45.31232,18.378189 9.09039,9.380674 28.92239,7.934321 28.92239,7.934321 0,0 -21.08008,12.423571 -39.0593,7.128224 -18.64966,-5.492806 -27.10796,4.877802 -41.7705,6.071788 -18.4905,1.505703 -21.29731,-7.201622 -41.476803,-9.921112 -15.916308,-2.14496 -21.532303,5.254117 -35.202885,4.590804 -8.102592,-0.393148 0.571045,-57.314177 0.571045,-57.314177 z;&quot;&gt;
    &lt;animate
    begin=&quot;0s&quot;
      dur=&quot;1s&quot;
      attributeName=&quot;d&quot;
      repeatCount=&quot;indefinite&quot;
      values=&quot;m 51.777177,27.066689 c 0,0 27.716737,-5.009711 45.71259,5.509349 16.434013,9.606122 18.102413,21.801178 36.991143,17.622614 18.88873,-4.178563 34.11595,6.82428 45.31232,18.378189 9.09039,9.380674 28.92239,7.934321 28.92239,7.934321 0,0 -21.08008,12.423571 -39.0593,7.128224 -18.64966,-5.492806 -27.10796,4.877802 -41.7705,6.071788 -18.4905,1.505703 -21.29731,-7.201622 -41.476803,-9.921112 -15.916308,-2.14496 -21.532303,5.254117 -35.202885,4.590804 -8.102592,-0.393148 0.571045,-57.314177 0.571045,-57.314177 z;
                     
            m 51.777177,27.066689 c 0,0 9.74226,3.950183 16.99505,3.879829 14.54241,-0.141064 30.14492,-5.816484 45.38438,2.507442 16.70598,9.124954 21.55248,21.930068 40.51806,18.115461 18.96558,-3.814607 31.84493,10.68943 42.79912,22.473193 5.68119,6.111424 10.26213,5.476947 10.26213,5.476947 0,0 -2.81269,5.346499 -13.37188,4.654742 -19.40014,-1.270948 -25.90588,-5.540935 -40.8038,0.534359 -17.17828,7.005208 -31.48182,-3.522055 -51.60529,-6.629043 -15.87212,-2.450595 -36.25913,12.584309 -51.85072,6.279671 -7.52055,-3.04102 1.67295,-57.292601 1.67295,-57.292601 z;
            
            m 51.777177,27.066689 c 0,0 20.14299,8.7136059 35.74314,7.7677078 15.18026,-0.9204387 27.31747,-8.198356 42.55693,0.1255701 16.70598,9.1249543 23.48878,22.7906423 46.5421,19.1911793 12.17378,-2.503937 26.69083,13.543343 31.11658,25.368416 -17.04989,-9.580947 -24.7361,-0.76845 -33.95216,3.037662 -17.17829,7.005206 -29.90461,-4.208072 -50.09929,-7.489617 -17.14028,-2.785219 -24.11578,9.060124 -41.32102,12.585167 -11.87315,2.432593 -26.96113,1.860878 -32.25923,-3.293483 -5.81447,-5.656718 1.67295,-57.2926022 1.67295,-57.2926022 z;
            
            m 51.777177,27.066689 c 0,0 5.52039,-2.752043 11.29691,-1.273654 13.83578,3.541004 25.75652,16.9379 41.84755,12.976965 21.40804,-5.269758 33.10473,-1.835011 48.77448,10.361504 15.02165,11.692071 12.82687,21.837831 36.77337,18.946771 8.50612,-1.02695 15.29639,4.72113 17.26644,11.44129 -4.00759,-1.10122 -7.86381,-2.25005 -14.05823,0.2777 -18.13677,7.40107 -28.68602,11.38232 -49.17123,3.63301 -18.28893,-6.9185 -25.29648,-1.51308 -42.96833,3.76611 -14.06834,4.2027 -30.28273,-5.59043 -40.5312,-3.93085 -7.5513,1.22281 -9.34853,2.60577 -10.90271,1.09376 -5.81447,-5.65672 1.67295,-57.292606 1.67295,-57.292606 z;&quot;
    /&gt;
      &lt;/path&gt;
    &lt;/g&gt;
  
  &lt;/svg&gt;
  </code></pre>
  <p>UPDATE:
  the d values must have the same number of coordinates for a smooth transition</p>