How to make my svg path animate smoothly and not step

Question

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.

<svg xmlns:svg="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 300 300" version="1.1" id="svg8">

  <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
      
     <path style="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" d="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;">
  <animate
  begin="0s"
    dur="1s"
    attributeName="d"
    repeatCount="indefinite"
    values="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;"
  />
    </path>
  </g>

</svg>

UPDATE: the d values must have the same number of coordinates for a smooth transition

Answer 1

To implement smooth animation, it is necessary that the number of anchor points and their type match in all paths.

The example code had four paths:

I left only two paths Start and end path:

There were two extra node points in one path, I deleted them to fulfill the condition of equality of points in both paths

The animation formula will now look like this:

values="start_path;end_path;start_path"

Added gradients:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 300 300" version="1.1">
<defs>
 <linearGradient id="grad1" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
     <stop offset="10%" stop-color="#002F8E"/>
      <stop offset="50%" stop-color="#24bed2"/>
       <stop offset="60%" stop-color="#002F8E"/>
      <stop offset="70%" stop-color="#24bed2"/>
      <stop offset="80%" stop-color="#002F8E"/>
      <stop offset="90%" stop-color="#24bed2"/>
      <animate attributeName="x1" dur="4s" values="0;200;200;0;" repeatCount="indefinite" />
       <animate attributeName="y1" dur="4s" values="0;50;50;0" repeatCount="indefinite" /> 
    </linearGradient>
</defs> 

  <path fill="url(#grad1)"  d="m51.8 27.1c0 0 27.7-5 45.7 5.5 16.4 9.6 18.1 21.8 37 17.6 18.9-4.2 34.1 6.8 45.3 18.4 9.1 9.4 28.9 7.9 28.9 7.9 0 0-21.1 12.4-39.1 7.1-18.6-5.5-27.1 4.9-41.8 6.1-18.5 1.5-21.3-7.2-41.5-9.9-15.9-2.1-21.5 5.3-35.2 4.6-8.1-0.4 0.6-57.3 0.6-57.3z">
  <animate
  begin="0s"
    dur="4s"
    attributeName="d"
    repeatCount="indefinite"
    values=" 
          m51.8 27.1c0 0 27.7-5 45.7 5.5 16.4 9.6 18.1 21.8 37 17.6 18.9-4.2 34.1 6.8 45.3 18.4 9.1 9.4 28.9 7.9 28.9 7.9 0 0-21.1 12.4-39.1 7.1-18.6-5.5-27.1 4.9-41.8 6.1-18.5 1.5-21.3-7.2-41.5-9.9-15.9-2.1-21.5 5.3-35.2 4.6-8.1-0.4 0.6-57.3 0.6-57.3z;
                   
          m51.8 27.1c19.9-2.9 33.6 14.3 48.9 11.1 21.4-5.3 37.4-1.2 53.1 11 15 11.7 12.7 24.9 36.6 22 8.5-1 14.4 1.6 18.4 5.4-4-1.1-8.8 0.8-15 3.3-18.1 7.4-28.7 11.4-49.2 3.6-18.3-6.9-30.9-9-44.6-2.1-8 4.2-26.6 4.6-49.8 3-6.5-4.1 1.7-57.3 1.7-57.3z;
          
          m51.8 27.1c0 0 27.7-5 45.7 5.5 16.4 9.6 18.1 21.8 37 17.6 18.9-4.2 34.1 6.8 45.3 18.4 9.1 9.4 28.9 7.9 28.9 7.9 0 0-21.1 12.4-39.1 7.1-18.6-5.5-27.1 4.9-41.8 6.1-18.5 1.5-21.3-7.2-41.5-9.9-15.9-2.1-21.5 5.3-35.2 4.6-8.1-0.4 0.6-57.3 0.6-57.3z"            
  />
    </path>
</svg>

if necessary, you can remove them by replacing them with one color

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 300 300" version="1.1">


  <path fill="#002F8E"  d="m51.8 27.1c0 0 27.7-5 45.7 5.5 16.4 9.6 18.1 21.8 37 17.6 18.9-4.2 34.1 6.8 45.3 18.4 9.1 9.4 28.9 7.9 28.9 7.9 0 0-21.1 12.4-39.1 7.1-18.6-5.5-27.1 4.9-41.8 6.1-18.5 1.5-21.3-7.2-41.5-9.9-15.9-2.1-21.5 5.3-35.2 4.6-8.1-0.4 0.6-57.3 0.6-57.3z">
  <animate
  begin="0s"
    dur="4s"
    attributeName="d"
    repeatCount="indefinite"
    values=" 
          m51.8 27.1c0 0 27.7-5 45.7 5.5 16.4 9.6 18.1 21.8 37 17.6 18.9-4.2 34.1 6.8 45.3 18.4 9.1 9.4 28.9 7.9 28.9 7.9 0 0-21.1 12.4-39.1 7.1-18.6-5.5-27.1 4.9-41.8 6.1-18.5 1.5-21.3-7.2-41.5-9.9-15.9-2.1-21.5 5.3-35.2 4.6-8.1-0.4 0.6-57.3 0.6-57.3z;
                   
          m51.8 27.1c19.9-2.9 33.6 14.3 48.9 11.1 21.4-5.3 37.4-1.2 53.1 11 15 11.7 12.7 24.9 36.6 22 8.5-1 14.4 1.6 18.4 5.4-4-1.1-8.8 0.8-15 3.3-18.1 7.4-28.7 11.4-49.2 3.6-18.3-6.9-30.9-9-44.6-2.1-8 4.2-26.6 4.6-49.8 3-6.5-4.1 1.7-57.3 1.7-57.3z;
          
          m51.8 27.1c0 0 27.7-5 45.7 5.5 16.4 9.6 18.1 21.8 37 17.6 18.9-4.2 34.1 6.8 45.3 18.4 9.1 9.4 28.9 7.9 28.9 7.9 0 0-21.1 12.4-39.1 7.1-18.6-5.5-27.1 4.9-41.8 6.1-18.5 1.5-21.3-7.2-41.5-9.9-15.9-2.1-21.5 5.3-35.2 4.6-8.1-0.4 0.6-57.3 0.6-57.3z"            
  />
    </path>
 </svg>