JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1" x="0px" y="0px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve" ><path id="line" stroke-width="2" fill="none"   stroke="blue" stroke-dasharray="0"><animate dur="7s"   repeatCount="indefinite"attributeName="d"  values="M32.3,58.1c2.5,2.2,32,29.8,32,29.8l33.4-29.8;" /></path></svg></span>

CSS

#line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  -webkit-animation: draw 7s linear infinite;
}

@-webkit-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

span {
  transform: rotate(90deg);
  width: 50px;
  height: 50px;
}