JSFiddle - React, Tailwind, and code Playground

by Brad9aga

HTML

<svg width="400" height="400" viewBox="0 0 400 400">
  <circle cx="200" cy="200" r="100" class="circ1" transform="rotate(-90 200 200)"/>
  <circle cx="200" cy="200" r="100" class="circ" transform="rotate(-90 200 200)"/>
</svg>

CSS

body{
  background: red;
}

.circ{
  fill: none;
  stroke: #655;
  stroke-width: 20;
  stroke-dashoffset: 1000;
  stroke-dasharray: 1000;
  animation: draw 10s linear infinite;
}

.circ1{
  fill: none;
  stroke: yellowgreen;
  stroke-width: 20;
  stroke-dashoffset: 0;
}

@keyframes draw{
  100%{
  stroke-dashoffset: 0;
  stroke-dasharray: 1000; 
  }
}