<svg viewBox="0 0 300 50" width="300">
<defs>
<style>
path{
fill: none;
stroke: #000;
stroke-width: 2px;
transition: 0.34s linear;
}
</style>
<marker id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="8"
markerHeight="8"
orient="auto-start-reverse">
<path d="M-20,-20 5,5 -14,24"/>
</marker>
</defs>
<path class="js_path" d="M5,24 100,24" marker-end="url(#arrow)" />
</svg><svg height="200" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<path d="M 15.498 487.577 L 15.498 431.037 L 62.884 396.913 L 94.033 351.883 L 158.319 309.973 L 189.252 236.175 L 280.039 205.522 L 302.034 124.519 L 320.749 62.004 L 384.937 13.925 L 445.421 30.396 L 469.462 54.445 L 469.462 488.53" stroke="red" stroke-width="4" fill="red" fill-opacity="0" stroke-dasharray="0 1637">
<animate attributeName="stroke-dasharray"
dur="2s"
begin="0s"
repeatCount="1"
values="0 1637; 1637 1637"
id="path"
fill="freeze"/>
<animate attributeName="stroke"
dur="1s"
begin="path.end"
repeatCount="1"
values="red; blue"
fill="freeze"/>
<animate attributeName="fill-opacity"
dur="1s"
begin="path.end"
repeatCount="1"
values="0; 1"
fill="freeze"/>
</path>
</svg>;