JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<svg width="600" height="600">
  <defs>
    <linearGradient id="test">
      <stop offset="0%" stop-color="#8234F3"/>
      <stop offset="50%" stop-color="#FB8A47"/>
      <stop offset="100%" stop-color="#F14394"/>
    </linearGradient>
  </defs>
  <circle cx="200" cy="200" r="159.155" fill="none" stroke="url(#test)" stroke-dasharray="10" stroke-width="10" stroke-linecap="round"></circle>
</svg>

CSS

circle {
  animation: foo 10s infinite;
  transform-origin: 200px 200px;
}

@keyframes foo {
  from {
    stroke-dasharray: 0 0 0 0 1000;
  }
  25% {
    stroke-dasharray: 0 0 0 25 975;
  }
  50% {
    stroke-dasharray: 0 25 50 25 975;
  }
  to {
    stroke-dasharray: 0 0 0 0 1000;
  }
}