<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> svg{ width: 500px; height: 500px; border:1px solid red; } #s line:nth-of-type(2){ stroke-dasharray: 100,100; stroke-dashoffset: 100; } </style> </head> <body> <svg id="s"> <line x1="0" y1="5" x2="100" y2="5" stroke="purple" stroke-width="10" /> <line x1="0" y1="5" x2="100" y2="5" stroke="red" stroke-width="10" /> </svg> </body> <script> var l=document.querySelector("#s line:nth-of-type(2)"); var timer=null; var i=100; function fn(){ timer=requestAnimationFrame(function(){ i--; l.style.strokeDashoffset=i; console.log(i); if(i>0){ fn(); } }) } fn(); </script> </html>