JSFiddle - React, Tailwind, and code Playground

by booktu8

HTML

<svg width="90" height="13" viewBox="0 0 89.4 12.4"  xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="6.2" x2="59.6" y2="6.2"></line>
  <line x1="54.7" y1="0.7" x2="60.5" y2="6.5"></line>
  <line x1="54.7" y1="11.7" x2="60.5" y2="5.8"></line>
</svg>

CSS

svg line {
  stroke: #000;
  stroke-width: 1px;
  stroke-dasharray: 60;
	stroke-dashoffset: 60;
	transition: stroke-dashoffset ease-in .5s;
}
svg:hover line {
  stroke-dashoffset: 0;
}