SVG animation in the snake

Question

I am trying to animate a snake-like text using SVG, for example:

My goals are to make the text animated, but in the same place. I already did it:

var textPath = document.getElementById('texto'), comprimento = textPath.getAttribute('startOffset'); var animador = setInterval(function () { comprimento--; textPath.setAttribute('startOffset', comprimento); }, 10); 

 <svg width="400" height="400"> <defs> <path id="myPath" d="m 40,130 c 0,0 60,-80 120,-80 60,0 74.00337,80 140,80 65.99663,0 80,-80 140,-80 60,0 120,80 120,80" /> </defs> <text style="stroke: #000000;"> <textPath startOffset="240" id="texto" xlink:href="#myPath">Testing this text</textPath> </text> </svg> 

As you can see, the animation is moving towards <- how to fix it?

Answer 1

Use ++ instead of -, then as soon as offsetValue reaches 240 (your original starting value when you went back), stop increasing it.

 var textPath = document.getElementById('texto'), comprimento = textPath.getAttribute('startOffset'); var animador = setInterval(function () { if (comprimento < 240) { comprimento++; textPath.setAttribute('startOffset', comprimento); } }, 10); 

 <svg width="400" height="400"> <defs> <path id="myPath" d="m 40,130 c 0,0 60,-80 120,-80 60,0 74.00337,80 140,80 65.99663,0 80,-80 140,-80 60,0 120,80 120,80" /> </defs> <text style="stroke: #000000;"> <textPath startOffset="0" id="texto" xlink:href="#myPath">Testing this text</textPath> </text> </svg>