JSFiddle - React, Tailwind, and code Playground
by Yuriy Petrichenko
HTML
<svg>
<polyline id="line2" points="5,40 20,10 20,10 100,10 100,100 150,10 190,10"/>
</svg>
CSS
body{
background-color:yellowgreen;
}
svg{
margin-left:300px;
margin-top:100px;
}
polyline{
stroke:black;
stroke-width:10px;
fill:transparent;
stroke-dasharray: 350;
stroke-dashoffset:0;
animation: dasharray 2.5s ease-in infinite;
}
/*animation*/
@keyframes dasharray {
0%{
stroke-dashoffset: 350;
}
100%{
stroke-dashoffset:0;
}
}