JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<svg height="200" width="500">
  <polyline id="line2" points="0,50 20,0 20,0 60,0"/>
</svg>

CSS

body{
  background-color:black;
}
/*animation*/ 
@keyframes dasharray {
  0%{
  stroke-dashoffset: 300;
  }
  100%{
  stroke-dashoffset:0;
  }
}
#line2{
  stroke:#fff;
  stroke-width:1px;
  fill:transparent;
  stroke-dasharray: 300;
  stroke-dashoffset: 0;
  animation: dasharray 2s ease-out;
  height:100px;
}

JavaScript

"M 0,40 L 20,0 M 20,0 L 60,0"