JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<svg viewbox="0 0 100 100">
      <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
           <stop offset="0%" stop-color="#66c4ff" />
           <stop offset="100%" stop-color="#00aeff" />
       </linearGradient>
       <path class="bg" d="M30,90 A40,40 0 1,1 80,90" fill='none' />
       <path id="fg" fill='none' class="fg" d="M30,90 A40,40 0 1,1 80,90" />
       <path id="dot" fill='none' class="dot" d="M30,90 A40,40 0 1,1 80,90" />
 </svg>

CSS

svg {
  height: 90vh;
  margin: auto;
  display: block;
}

path {
  stroke-linecap: round;
  stroke-width: 10;
}

path.bg {
  stroke: #dddddd;
}

path.fg {
  stroke: url(#gradient);
  stroke-dasharray: 198;
  stroke-dashoffset: 198;
  animation: dash 3s ease-out forwards;
}

path.dot {
  stroke: #ff66ff;
  stroke-dasharray: 0px, 198px;
  stroke-dashoffset: 198;
  stroke-width: 3.5px;
  animation: dash 3s ease-out forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1; /* <---- changed to "1" from "0"  */
  }
}