JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://semantic-graphics.herokuapp.com/static/js/snap.svg-min.js"></script>
<svg>
    <line fill="none" stroke="#008D36" stroke-width="2" x1="175" y1="153" x2="175" y2="21" id="Line"/>
</svg>

CSS

line {
    stroke-dasharray: 0,0;
}

JavaScript

$(function() {
    var s = Snap('svg');
    var l = s.select('#Line');
    console.log(l);
    l.animate({'stroke-dasharray':'1,20'}, 500);
});