SVG infinity animate not working properly

Question

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?

.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;}

<div class="svg-main">
<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"
 >
<g class="svg-col">
 <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"/>
  <animate attributeName="stroke-dasharray" attributeType="XML"
       from="1900, 1700"  to="200 1700"
       begin="0s" dur="3s"
       repeatCount="indefinite"/>
  <animate attributeName="stroke-dashoffset" attributeType="XML"
      from="-1700"  to="-3600"
      begin="0s" dur="3s"
      repeatCount="indefinite"/>  
 </path>

 <circle id="plug" class="circ" cx="0" cy="0" r="7"/> 
 <animateMotion
  xlink:href="#plug"
    dur="3s"
  rotate="auto"
  repeatCount="indefinite"
  calcMode="linear"
  keyTimes="0;1"    
  keySplines="0.42, 0, 0.58, 1">
  <mpath xlink:href="#loop-normal"/>
 </animateMotion> 
</g> 
</svg>
 
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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"> 
<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"/>
</svg>
</div>

Please describe exactly how you want the ends of the dash to move. Should its length change over time? - Your `` is lacking the `keyPoints` attribute, and defining `keySplines` has no effect as long as you don't set `calcMode="spline"` — ccprog, Jul 06 '18 at 17:38
Thanks @ccprog I just simply want that it should not stop even for a sec. It should keep rotating as it does on left side but on right side it stops for a while and then continue rotating again. I want the same rotation on the right side too, so that the tail shouldn't stop while moving. Thanks — Figar Ali, Jul 10 '18 at 08:01

score 3 · Accepted Answer · answered Jul 10 '18 at 14:29

The first precondition to get a fluent movement with stroke-dashoffset animations is to know the length of the path with appropriate precision:

document.querySelector('#loop-normal').getTotalLength() // approx. 1910

Leave out the animation of stroke-dasharray. Instead divide the total length fo the path statically into one dash and one gap: stroke-dasharray="200 1710". (Any other proportion will work as long as the sum equals 1910.)
Your <animateMotion> is lacking the keyPoints attribute. Set it to "0;1"
Defining keySplines has no effect as long as you don't set calcMode="spline". Leave it of.

The rest is a bit of a simplification: define the path only once, and position both the background and animated use in the same SVG; name the correct path length in the stroke-dashoffset animation to ensure smooth movement; remove unused CSS.

.svg-main {
    width: 700px;
    margin: 30px auto;
    position: relative;
}
svg#svga {
    position: absolute;
    top: 0;
    left: auto;
    bottom: auto;
    right: auto;
}

.st2{fill:none;stroke:#cccccc;stroke-width:6;}
.sd1{fill:none;stroke:#000000; stroke-width:6;stroke-linecap:round;}
.circ{fill:#000000; }

<div class="svg-main">
<svg id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="300px" height="200px" viewBox="0 0 685 310">
  <g class="st2">
 <path 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"/>
  </g>
 <use class="sd1" stroke-dasharray="200 1710" xlink:href="#loop-normal">
  <animate attributeName="stroke-dashoffset"
      from="200"  to="-1710"
      begin="0s" dur="3s"
      repeatCount="indefinite"/>  
 </use>

 <circle id="plug" class="circ" cx="0" cy="0" r="7"/> 
 <animateMotion
  xlink:href="#plug"
    dur="3s"
  rotate="auto"
  repeatCount="indefinite"
  calcMode="linear"
  keyTimes="0;1"    
  keyPoints="0;1">
  <mpath xlink:href="#loop-normal"/>
 </animateMotion> 
</svg>
</div>

Thanks again, I want to ask just one thing, Can you please help, — Figar Ali, Jul 18 '18 at 13:50
I want to make dasharray (tail) transparent like this screenshot please look, https://prnt.sc/k7ziu0 If it is possible please help me. Thanks again. — Figar Ali, Jul 18 '18 at 13:52
That is a completely different problem. Please ask a new question. — ccprog, Jul 18 '18 at 15:47
Can you please answer this, please? https://stackoverflow.com/questions/51417587/svg-it-is-possible-to-add-stroke-dasharray-gradient-or-transparent-form-one-si/51417771 — Figar Ali, Jul 19 '18 at 08:53

SVG infinity animate not working properly

1 Answers1