JSFiddle - React, Tailwind, and code Playground

by chadarsenault

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="500px" viewBox="0 0 200 500">
   <!-- horizontal line -->
   <line x1="0" y1="0" x2="0" y2="500" />
</svg>

CSS

line {
    stroke-width: 30;
    stroke-dasharray: 500;
    stroke-dashoffset: 25;
    -webkit-animation: dash 5s linear;
}

-webkit-@keyframes dash {
  0% {
      stroke: tomato;
  }
  100% {
      stroke: blue;
  }
}