JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <marker id="triangle1" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="userSpaceOnUse"
                    markerWidth="10" markerHeight="10" fill-opacity="1"
                    fill="#888" orient="auto" class="arrowhead">
                <path d="M 0 0 L 10 5 L 0 10 z" />
            </marker>
        </defs>
        <path class="clas" id="p1" d="M10 10 L200 10 " 
             marker-end="url(#triangle1)"
               />

    </svg>

</body>
</html>

CSS

.clas {
           fill:transparent;
           stroke:#888;
       }

JavaScript

var p1 = document.getElementById("p1");
        for (i = 11; i < 601; ++i) {
            setTimeout(update, 10 * i, i)
        }


        function update(param) {
            var x1 = 10;
            var y1 = 10;
            var x2 = 200;
            var y2 = param;
            var r = "M" + x1 + " " + y1 + " L " + x2 + " " + y2;
            p1.setAttribute("d", r);
            
            //if (isIE) {
            var parent = p1.parentNode;
            parent.removeChild(p1);
            parent.appendChild(p1);
            //}
            
            
        }