JSFiddle - React, Tailwind, and code Playground

by Julien Roche

HTML

<svg height="180" width="180">
  <path class="path" d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

CSS

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s 1s linear both alternate infinite;
}

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