JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<svg height="210" width="500">
  <line class="outline" x1="0" y1="0" x2="200" y2="200"/>
  <line class="dash" x1="0" y1="0" x2="200" y2="200"/>
</svg>

CSS

svg {
  margin: 100px;
  overflow: visible;
}
.outline {
  stroke: black;
  stroke-width: 10px;
}

.dash {
  stroke: white;
  stroke-width: 8px;
  stroke-dasharray: 10px;
  stroke-dashoffset: 1000px;
  animation: move 10s linear infinite;
}

@keyframes move {
  to {
     stroke-dashoffset: 0; 
  }
}