JSFiddle - React, Tailwind, and code Playground

by Grzegorz Matyszewski

HTML

<?xml version="1.0" encoding="UTF-8"?>
<svg class="illustration" data-animation="firstIllustration" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320.69 320.69">
  <g id="circles">
    <path id="circle-1" class="circle" d="M203.83,191.32c40.54-57.32,53.8-117.66,29.61-134.76-24.19-17.11-76.66,15.49-117.2,72.82-40.54,57.32-53.8,117.66-29.61,134.76,24.19,17.11,76.66-15.49,117.2-72.82Z" style="fill: none; stroke: #363636;"/>
    <path id="circle-2" class="circle" d="M216.81,178.72c16.75-51.75,4.9-101.93-26.45-112.08-31.35-10.14-70.35,23.59-87.09,75.34-16.75,51.75-4.9,101.93,26.45,112.08,31.35,10.14,70.35-23.59,87.09-75.34Z" style="fill: none; stroke: #363636;"/>
    <path id="circle-3" class="circle" d="M190,211.86c76.38-44.1,124.96-102.96,108.51-131.46-16.46-28.5-91.72-15.86-168.1,28.24C54.03,152.74,5.45,211.59,21.9,240.1c16.46,28.5,91.72,15.86,168.1-28.24Z" style="fill: none; stroke: #363636; stroke-dasharray: 0 0 2 2;"/>
    <path id="circle-4" class="circle" d="M287.6,178c2.85-20.6-51.95-45.2-122.4-54.94-70.45-9.75-129.86-.95-132.71,19.65-2.85,20.6,51.95,45.19,122.4,54.94,70.45,9.75,129.87.95,132.72-19.65Z" style="fill: none; stroke: #363636;"/>
    <path id="circle-5" class="circle" d="M169.53,201.09c77.14-16.96,135.65-48.99,130.69-71.55-4.96-22.56-71.51-27.09-148.65-10.13C74.43,136.37,15.92,168.4,20.88,190.96c4.96,22.55,71.51,27.09,148.65,10.13Z" style="fill: none; stroke: #363636;"/>
  </g>
  <g id="outline">
    <path id="line" d="M320.19,160.35H.35" style="fill: none; stroke: #363636;"/>
    <path id="outline-2" class="outline" d="M160.35,320.19c88.28,0,159.85-71.57,159.85-159.85S248.63.5,160.35.5.5,72.07.5,160.35s71.57,159.85,159.85,159.85Z" style="fill: none; stroke: #363636;"/>
  </g>
  <g id="center">
    <path id="dot-center" class="dot" d="M159.85,171.35c5.8,0,10.5-4.93,10.5-11s-4.7-11-10.5-11-10.5,4.93-10.5,11,4.7,11,10.5,11Z" style="fill: #363636; stroke: #363636;"/>
    <path id="dot-outline" class="dot"...

SCSS

@keyframes rotating {
  from { rotate: 0deg; }
  to { rotate: 180deg; }
}

#circles path {
  transform-origin: 160px 160px;
  animation: rotating 1s infinite forwards linear;

  @for $i from 1 through 5 {
    &:nth-child(#{$i}) {
      animation-delay: $i * 0.1;
      animation-duration: 3s + 0.5s * $i;
    }  
  }
  
  &:nth-child(odd) {
    animation-direction: reverse;
  }
}