How to make svg path as moveable?

Question

I have created an SVG image. You can see it here:

jsfiddle.net/o2n56fyb/5/

In this SVG image, there is few dot line. You can see it here:

http://creativeartbd.com/demo/blockchain/

Now, I want to make those dot lines as moveable like it's running continuously. Is that possible? If so, can you tell me how?

Answer 1

You need to use stroke-dasharray and stroke-dashoffset for example like this:

 var polygon = document.querySelector("polygon"); var dashoffset = 0; polygon.style.strokeDashoffset = dashoffset; function Animate() { window.requestAnimationFrame(Animate); dashoffset += 2; polygon.style.strokeDashoffset = dashoffset; } Animate(); 

 svg{border:1px solid #d9d9d9; display:block; margin:0 auto;max-height:100vh} 

 <svg width="250" height="250" viewBox="0 0 250 250"> <polygon points="50,50 200,50 200,200 50 200" style="fill:none; stroke:#000; stroke-width:3; stroke-dasharray: 30,15;" ></polygon> </svg> 

I hope this is what you need.