7

I have created an SVG animation in which I am allowing stroke-dasharray to move. Is it possible that I can add a gradient to the tail of stroke-dasharray and keep one side transparent as you can see in the example?

enter image description here

.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="10s"
      repeatCount="indefinite"/>  
 </use>

 <circle id="plug" class="circ" cx="0" cy="0" r="7"/> 
 <animateMotion
  xlink:href="#plug"
    dur="10s"
  rotate="auto"
  repeatCount="indefinite"
  calcMode="linear"
  keyTimes="0;1"    
  keyPoints="0;1">
  <mpath xlink:href="#loop-normal"/>
 </animateMotion> 
</svg>
</div>
Figar Ali
  • 826
  • 1
  • 9
  • 17
  • 1
    I vote to reopen because the question linked as duplicate is about the general problem of describing a gradient along a path. This question tries to find not a static solution, but to animate that gradient going along that path. While that might seem as even more complicated, it is in fact not, because the gradient stretches only along a comparatively short distance. I have indeed an answer, and it would not in the least be appropriate to add it to the linked question, but is in its specialization a perfect fit here. – ccprog Jul 19 '18 at 16:49
  • Since I can't answer for now, see this [codepen](https://codepen.io/ccprog/pen/bjgbmG?editors=1000) - you'll have to figure it out from there. – ccprog Jul 20 '18 at 13:49
  • I agree. This is not the same question as what was marked Duplicate. They are slightly different and so merit different solutions. – Chris Moschini Apr 18 '21 at 03:11

1 Answers1

3

Please refer this 

.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-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">
    <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#000000" />
      <stop offset="100%" stop-color="#ffffff" />
    </linearGradient>
  </defs>
  <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="url(#gradient)" stroke-dasharray="200 1710" xlink:href="#loop-normal">
  <animate attributeName="stroke-dashoffset"
      from="200"  to="-1710"
      begin="0s" dur="10s"
      repeatCount="indefinite"/>  
 </use>

 <circle id="plug" class="circ" cx="0" cy="0" r="7"/> 
  
 <animateMotion
  xlink:href="#plug"
    dur="10s"
  rotate="auto"
  repeatCount="indefinite"
  calcMode="linear"
  keyTimes="0;1"    
  keyPoints="0;1">
  <mpath xlink:href="#loop-normal"/>
 </animateMotion> 
</svg>
</div>
Alfin Paul
  • 1,543
  • 14
  • 26
  • Thanks your answers, I need the gradient on the end of tail only not on the whole tail please look into this, Example screenshot. – Figar Ali Jul 19 '18 at 08:56