How to Animate Path Shape Without Using Smil

SVG SMIL path animation not working in Safari

You have an extra semicolon at the end of the last paths for the values. You also have extra semicolons at the end of the d attributes

svg{width:300px; border:solid}

<svg viewBox="0 0 540 450" ><style type="text/css">    .st0{fill:rgba(115, 203, 232, 0.3);}</style><path class="st0" d="M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z">    <animate        attributeType="XML"        attributeName='d'        dur="10s"        repeatCount="indefinite"        values="            M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z;                            M393.620000,413.170000C314.860000,451.100000,219.884470,381.470294,91.370310,296.084829C-59.166688,186.229543,29.222773,79.276069,119.102773,81.566069C208.982773,83.866069,254.758124,59.826606,334.437194,45.676998C441.848727,37.237015,431.408010,79.499494,495.938010,159.869494C560.458010,240.249494,566.460000,329.930000,393.620000,413.170000Z;                            M374.262300,334.744023C295.502300,372.674023,219.884470,464.784206,91.370310,379.398742C-59.166688,269.543456,86.027714,124.720021,175.907714,127.010021C265.787714,129.310021,254.758124,59.826606,334.437194,45.676998C441.848727,37.237015,434.437607,63.594111,498.967607,143.964111C563.487607,224.344111,547.102300,251.504023,374.262300,334.744023Z;                            M270,376.835237C191.240000,414.765237,181.548418,328.452349,53.034258,243.066884C-97.502740,133.211598,86.319021,36.861713,176.199021,39.151713C266.079021,41.451713,336.324192,10.071305,405.399674,50.570962C472.843833,113.093459,600.249772,160.249902,501.647635,230.831974C407.113801,294.083100,442.840000,293.595237,270,376.835237Z;                            M328.727569,304.241436C302.169852,351.959364,192.967667,434.488238,64.453507,349.102773C-86.083491,239.247487,100.185252,122.506085,163.148450,79.934747C247.318825,36.557748,311.038710,-14.398515,380.114192,26.101142C447.558351,88.623639,604.328075,280.967683,505.725938,351.549755C411.192104,414.800881,411.029233,229.973703,328.727569,304.241436Z;                            M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z"/>
</path><path  class="st0" d="M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z">    <animate        attributeName="d"        dur="10s"        repeatCount="indefinite"        values="            M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z;            M314.232437,343.451865C235.022437,340.801865,68.622550,431.473244,28.022550,304.423244C-12.567450,177.363244,80.443183,65.747277,145.108413,88.464874C255.317034,138.502506,258.603391,56.904805,315.533391,33.824805C372.463391,10.744805,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,488.062437,349.281865,314.232437,343.451865Z;            M284.310494,403.295750C205.100494,400.645750,119.359757,400.250347,78.759757,273.200347C38.169757,146.140347,137.685161,85.261587,188.039896,57.241977C302.151379,35.727137,344.466357,155.777310,381.882047,136.600173C446.617771,113.520173,551.309427,137.307909,523.686036,212.055507C467.431656,320.627909,458.140494,409.125750,284.310494,403.295750Z;            M283.009540,355.160451C119.237528,330.394232,92.039722,396.347485,51.439722,269.297485C10.849722,142.237485,60.928873,8.505299,120.390286,55.941023C256.617988,143.706323,233.885264,158.379218,288.213356,167.823070C367.259574,178.567875,462.844553,181.540346,435.221162,256.287944C378.966782,364.860346,456.839540,360.990451,283.009540,355.160451Z;            M307.727667,404.596704C149.159471,399.344795,63.418734,479.608543,22.818734,352.558543C-17.771266,225.498543,127.277529,224.463669,173.729402,166.522116C278.734207,50.037633,336.660633,79.021023,361.066782,102.775369C416.695828,196.781232,491.465542,207.559427,485.958369,299.219428C479.140242,367.462255,481.557667,410.426704,307.727667,404.596704Z;            M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z"/>
</path>
</svg>

How move/animate multiple circles along motion path by SVG Animation

Your animated circles (moving along the motion path)

should be placed at cx/cy =0.

Explained here by @Paul LeBeau: Offset when following svg motion path

Otherwise their initial position will be added to the current motion path position.

That's why your circle are moving as in straight line around the path.

Path offset via animation delay

Actually all circles have the same center position of cx="0" cy="0" - so they would be overlapping without animation.

By adding an incremental begin value we mimic a path offset like so:

<animateMotion xlink:href="#plane" dur="10s" begin="0s"repeatCount="indefinite" rotate="auto">
    <mpath xlink:href="#planePath" />
</animateMotion>
<animateMotion xlink:href="#point-1" dur="10s" begin="0.1s" repeatCount="indefinite" rotate="auto">
    <mpath xlink:href="#planePath" />
</animateMotion> 

The higher the begin="0.1s" value, the larger the distance between the circles.

Simplified example

<svg viewBox="-300 -150 3387 1270" align="center" class="svg-animation">
            <path id="planePath" fill="none" stroke="red" stroke-width="0.5%" stroke-dasharray="1% 2%"
            stroke-linecap="round"  class="planePath"
                d="M1.50024 430C58.2002 -111.6 853.699 -156.741 889.5 430C925.5 1020 1754 1007.5 1785 430C1816 -147.5 2665.5 -132 2665.5 430C2665.5 1010.27 1847 948 1785 453C1841.5 -83.5 930.282 -187.244 889.5 389C851 933 35 1017.5 1.50024 430Z" />
            />
            <g id="circles">
                <circle id="plane" class="plane" fill="green" cx="0" cy="0" r="20" fill="black" />
                <circle id="point-1" class="point-1" fill="magenta" cx="0" cy="0" r="20" fill="black" />
                <circle id="point-2" class="point-2" fill="purple" cx="0" cy="0" r="20" fill="black" />
                <circle id="point-3" class="point-3" fill="orange" cx="0" cy="0" r="20" fill="black" />
            </g>
            <animateMotion xlink:href="#plane" dur="10s" begin="0s"repeatCount="indefinite" rotate="auto">
                <mpath xlink:href="#planePath" />
            </animateMotion>
            <animateMotion xlink:href="#point-1" dur="10s" begin="0.1s" repeatCount="indefinite" rotate="auto">
                <mpath xlink:href="#planePath" />
            </animateMotion>
            <animateMotion xlink:href="#point-2" dur="10s" begin="0.2s" repeatCount="indefinite" rotate="auto">
                <mpath xlink:href="#planePath" />
            </animateMotion>
            <animateMotion xlink:href="#point-3" dur="10s" begin="0.3s" repeatCount="indefinite" rotate="auto">
                <mpath xlink:href="#planePath" />
            </animateMotion>

        </svg>

Animating SVG fill linearly along length of path

You could do this (easier to describe than to do, there's a lot of fiddly work involved):

1. Draw a smooth path on top of the shape that follows what you would consider the "path" and select such a stroke-width that the path covers the shape everywhere.
2. I would leave the final dot completely out of this, as it is so much thicker than the rest.
3. Divide the path in such a way that it has no overlapping parts. Order the parts in drawing order, make sure every partial path is drawn in the right direction.
4. Now divide the shape in the same way, making sure each part is exactly beneath the path on top.
5. Associate each of the shapes with one of the paths on top, defining the path as a mask for the shape. The path must have stroke:white. Preserve order.
6. Now you can animate the paths that define the masks with a stroke-dashoffset animation.
7. I would simply hide the final dot until the pseudo-line animation finishes and then reveal it at once.

Edit: I've definitely got too much time on my hands today, here's the working result:

.clef {    fill: black;    stroke: black;    stroke-width: 0.1;}mask path {    fill: none;    stroke: white;    stroke-width: 6;}#mask1 path {    stroke-dasharray: 100.8186 100.8186;    stroke-dashoffset: 100.8186;    animation: draw1 1s linear forwards;}@keyframes draw1 {    from { stroke-dashoffset: 100.8186; }    to { stroke-dashoffset: 0; }}#mask2 path {    stroke-dasharray: 83.6713 83.6713;    stroke-dashoffset: 83.6713;    animation: draw2 1s 1s linear forwards;}@keyframes draw2 {    from { stroke-dashoffset: 83.6713; }    to { stroke-dashoffset: 0; }}.dot {    opacity: 0;    animation: reveal 0s 2.5s forwards;}@keyframes reveal {    from { opacity: 0; }    to { opacity: 1; }}

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200" viewBox="0 0 44 75">  <defs>  <mask id="mask1" maskUnits="userSpaceOnUse">      <path d="M 24.3018,49.658 C 15.0191,46.9092 18.5393,38.1126 25.6256,38.2163 35.5458,38.3614 34.8431,54.3874 22.6943,54.1023 12.0123,53.8516 7.34095,40.0402 18.4391,30.1787 29.5373,20.3173 29.9235,12.5622 27.8005,9.28112" />  </mask>  <mask id="mask2" maskUnits="userSpaceOnUse">      <path d="M 27.8005,9.28112 C 25.1382,5.16638 17.6602,8.86888 20.5194,22.1412 L 28.1788,57.6956 C 31.6264,73.699 16.4903,72.3627 15.035,62.329" />  </mask>  </defs>  <path class="clef" mask="url(#mask1)" d="M 26.8522,9.90048 C 26.912,9.95039 26.9649,10.0085 27.0101,10.075 27.4815,10.7683 28.6214,14.0098 25.3767,19.8157 22.846,24.3437 11.0718,30.2815 10.2077,40.9075 9.45969,50.1477 19.1325,56.9723 27.4811,54.2894 33.0239,52.5081 35.8812,44.0959 32.4504,39.7568 23.3964,28.3057 8.87616,45.8309 22.9422,50.6319 21.4126,49.4286 20.37,48.4968 20.1759,47.3578 18.286,36.2692 34.9591,39.1968 30.4666,49.7165 28.6194,54.0421 21.1577,54.879 16.9085,51.0198 13.3489,47.787 11.7693,41.5593 15.7305,37.0885 21.0956,31.0332 27.4302,25.5974 29.1125,17.3081 29.7841,13.9988 29.4887,10.9357 28.6445,8.70078 Z" />  <path class="clef" mask="url(#mask2)" d="M 15.7311,63.3465 C 15.3353,65.46 17.5402,69.8491 21.9764,69.9924 27.3392,70.1658 30.7655,66.0634 29.1692,59.3682 L 21.164,22.4229 C 20.2111,18.0249 20.9262,15.6394 21.4351,14.2178 22.7185,10.6326 25.8192,9.03863 26.8522,9.90048 L 28.6445,8.70078 C 26.9883,4.31578 23.2199,3.11893 20.4997,9.50576 19.1217,12.7412 18.6085,15.989 19.9279,22.2128 L 27.9268,59.9444 C 28.4995,62.6457 28.1161,66.3629 25.595,68.0714 24.3461,68.9177 19.9267,69.5001 18.8455,67.48" />  <path class="clef dot" d="M 15.6702,63.6634 A 3.77139,3.8362 1.075 0 1 19.5129,59.8986 3.77139,3.8362 1.075 0 1 23.2116,63.8049 3.77139,3.8362 1.075 0 1 19.3689,67.5697 3.77139,3.8362 1.075 0 1 15.6702,63.6634 Z" /></svg>

How to morph a path data to another path data in SVG?

The most important when trying to morph a path in svg is thast the d attribute hes to have the same number of commands and the same commands. I've rewritten the short path so that the lines drawing the sides of the shape have a length = 0.

M54,346
C60.627,346,66,351.373,66,358
L66,358L42,358L42,358
C42,351.373,47.373,346,54,346Z

Please take a look:

svg{border:solid}

<svg viewBox="5 200 100 200" width="100">

  <path d="M54,346
          C60.627,346,66,351.373,66,358
          L66,358L42,358L42,358
          C42,351.373,47.373,346,54,346Z"  stroke="red" fill="gold" >

  <animate  dur='5s'
    attributeType="XML"
    attributeName='d'      
    repeatCount='indefinite'
           values="M54,225
           C60.627,225 66,230.373 66,236
           L66,356L42,356L42,236
           C42,230.373 47.373,225 54,225Z;
                                                                     
           M54,346
           C60.627,346,66,351.373,66,356
           L66,356L42,356L42,356
           C42,351.373,47.373,346,54,346Z;
                                                                                  M54,225
           C60.627,225 66,230.373 66,236
           L66,356L42,356L42,236
           C42,230.373 47.373,225 54,225Z" />
    
    </path>
</svg>

How to self-draw a line with SMIL animation (not CSS)

Other than accessing the line by id and the line having no id there's not much wrong with your animation.

I've also increased the duration and changed the colour to make it clearer it's animating.

<svg>  <line id="first-line" fill="none" stroke="#BBBBBB" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="19.69" y1="75.671" x2="19.69" y2="175.79"/><animate xlink:href="#first-line" attributeName="stroke" from="transparent" to="red" dur="2.5s" begin="0"  />  </svg>

SVG path animation jump

I found that when dragging nodes in the vector editor, the type of nodes changes

Therefore, smooth animation is not obtained even if the number of node points is equal in the initial and final paths of the shape.

It remained to solve the problem of how to prevent the type node points from changing when dragging.

I found that most often the type of automatically smoothed points changes to other types of node points

Therefore, I tried to avoid using this type of node points.

I first created a rectangle with concave sides and then transformed these sides into straight lines.

With this technique, the type of node points did not change and the animation became smooth.

<p>Smooth animation</p>
    <svg
          width="200px"
          height="133px"
          viewBox="0 0 200 133"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg">
          <path fill="#FFFFFF" stroke="#616161" stroke-width="4">
            <animate
              repeatCount="indefinite"
              fill="freeze"
              attributeName="d"
              dur="3s"
              values="    
            m5.8 127.8c-1.6-1.6-3-3.7-3-6 0-14.3-0.7-34.2-0.7-53.7 0-18.3 0.7-55.2 0.7-55.2 0 0 0.1-6.5 2.1-8.6C6.7 2.5 12.3 2.3 12.3 2.3H187.9c0 0 4.6 0.9 6.2 2.4 2.9 2.8 2.9 8.3 2.9 8.3 0 0-0.5 36.9-0.5 55.2 0 19.4 0.5 35.9 0.5 53.7 0 2.4-1.3 4.7-3 6.4-1.6 1.6-6 2.7-6 2.7H12.3c0 0-4.8-1.5-6.5-3.2z;
            m5.8 127.8c-1.6-1.6-3-3.7-3-6 0-14.3 9.3-34.2 9.3-53.7 0-18.3-9.3-55.2-9.3-55.2 0 0 0.1-6.5 2.1-8.6C6.7 2.5 12.3 2.3 12.3 2.3H187.9c0 0 4.6 0.9 6.2 2.4 2.9 2.8 2.9 8.3 2.9 8.3 0 0-8.5 36.9-8.5 55.2 0 19.4 8.5 35.9 8.5 53.7 0 2.4-1.3 4.7-3 6.4-1.6 1.6-6 2.7-6 2.7H12.3c0 0-4.8-1.5-6.5-3.2z;
                m5.8 127.8c-1.6-1.6-3-3.7-3-6 0-14.3-0.7-34.2-0.7-53.7 0-18.3 0.7-55.2 0.7-55.2 0 0 0.1-6.5 2.1-8.6C6.7 2.5 12.3 2.3 12.3 2.3H187.9c0 0 4.6 0.9 6.2 2.4 2.9 2.8 2.9 8.3 2.9 8.3 0 0-0.5 36.9-0.5 55.2 0 19.4 0.5 35.9 0.5 53.7 0 2.4-1.3 4.7-3 6.4-1.6 1.6-6 2.7-6 2.7H12.3c0 0-4.8-1.5-6.5-3.2z"
            />
          </path>
        </svg>

---

Related Topics