How To Draw Animation From End Of The Line (svg)?

I have this SVG animation HERE, now if you see the SVG, you will see that the dashed lines get drawn, the code that draws the lines is as follows: $(document).ready(function() {

Solution 1:

You just need to reverse the linearGradient definition for the yellow gradient like in the below code block and also reverse the corresponding jQuery code.

<defs><linearGradientid="yellow-gradient"><stopoffset="100%"id="move-opacity-1"stop-opacity="0"stop-color="#ffde17" /><stopoffset="100%"id="last-opacity-1"stop-opacity="1"stop-color="#ffde17" /></linearGradient></defs>

var offset1 = parseInt($('#move-opacity-1').attr('offset'));
setInterval(function() {
  if (offset1 > 0) {
    $('#move-opacity-1').attr("offset", offset1 + "%");
    $('#last-opacity-1').attr("offset", (offset1 + 1) + "%");
  }
  offset1--;
}, 25);

Fiddle Demo