title: SVG infinity animate not working properly
body: <p>I have created the SVG infinity animation but it's not working smoothly, It's stuck in the middle and then flow off. Settled nodes in Illustrator in SVG but after that I have facing same issue. Can anybody review the code and help me Please?  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.svg-main {
      width: 700px;
      margin: 30px auto;
      position: relative;
  }
  svg#svga {
      position: absolute;
      top: 0;
      left: auto;
      bottom: auto;
      right: auto;
  }
  
  .sd1{fill:none;stroke:#000000; stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
  .circ{fill:#000000; }
  .st0{fill:#cccccc;}
  .st1{fill:#cccccc;}
  .st2{fill:none;stroke:#cccccc;stroke-width:6;stroke-miterlimit:10;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="svg-main"&gt;
  &lt;svg version="1.1" id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="300px" height="200px" viewBox="0 0 685 310" style="enable-background:new 0 0 671.1 304.4;" xml:space="preserve"
   &gt;
  &lt;g class="svg-col"&gt;
   &lt;path class="sd1" id="loop-normal" d="M343.6,156.5c11,15.9,104.6,147.2,181.9,147.6c0.1,0,0.8,0,1,0c82.1-0.3,148.6-67,148.6-149.2
   c0-82.4-66.8-149.2-149.2-149.2c-77.2,0-170.8,131-182.2,147.5c-0.8,1.1-1.6,2.3-2.1,3.1c-10.6,15.3-104.8,147.8-182.4,147.8
   C76.7,304.2,9.9,237.4,9.9,155S76.7,5.8,159.1,5.8c77.2,0,170.7,130.9,182.2,147.5C342.1,154.4,342.9,155.6,343.6,156.5z"/&gt;
    &lt;animate attributeName="stroke-dasharray" attributeType="XML"
         from="1900, 1700"  to="200 1700"
         begin="0s" dur="3s"
         repeatCount="indefinite"/&gt;
    &lt;animate attributeName="stroke-dashoffset" attributeType="XML"
        from="-1700"  to="-3600"
        begin="0s" dur="3s"
        repeatCount="indefinite"/&gt;  
   &lt;/path&gt;
  
   &lt;circle id="plug" class="circ" cx="0" cy="0" r="7"/&gt; 
   &lt;animateMotion
    xlink:href="#plug"
      dur="3s"
    rotate="auto"
    repeatCount="indefinite"
    calcMode="linear"
    keyTimes="0;1"    
    keySplines="0.42, 0, 0.58, 1"&gt;
    &lt;mpath xlink:href="#loop-normal"/&gt;
   &lt;/animateMotion&gt; 
  &lt;/g&gt; 
  &lt;/svg&gt;
   
  &lt;!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;svg version="1.1" id="svg-bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="300px" height="200px" viewBox="0 0 685 310" style="enable-background:new 0 0 685 310;" xml:space="preserve"&gt; 
  &lt;path class="st2" d="M159.1,5.8C76.7,5.8,9.9,72.6,9.9,155s66.8,149.2,149.2,149.2S342.5,155,342.5,155S241.5,5.8,159.1,5.8z
    M525.9,5.8C443.5,5.8,342.5,155,342.5,155s101,149.2,183.4,149.2S675.1,237.4,675.1,155S608.3,5.8,525.9,5.8z"/&gt;
  &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>