JSFiddle - React, Tailwind, and code Playground
by Yuriy Petrichenko
HTML
<svg width="200" height="200">
<polyline points="5,135 30,5 55,135 80,5, 105,135 130,5, 155,135 180,5, 205,135 230,5, 255,135"
fill="none" stroke="orangered" />
</svg>
CSS
polyline {
background-color;transparent;
stroke-dasharray: 1000;
stroke-width: 10px;
animation: lineAN 4s linear infinite;
}
svg{
background-color:yellowgreen;
}
@keyframes lineAN {
0% {
stroke-dashoffset: 1050;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}