JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 100">
  <defs>
    <style>

    </style>
    <clipPath id="clippath">
      <path class="cls-2" d="m50,20c16.54,0,30,13.46,30,30s-13.46,30-30,30-30-13.46-30-30,13.46-30,30-30m0-20C22.39,0,0,22.39,0,50s22.39,50,50,50,50-22.39,50-50S77.61,0,50,0h0Z"/>
    </clipPath>
    <clipPath id="clippath-1">
      <path class="cls-2" d="m175,20c16.54,0,30,13.46,30,30s-13.46,30-30,30-30-13.46-30-30,13.46-30,30-30m0-20c-27.61,0-50,22.39-50,50s22.39,50,50,50,50-22.39,50-50S202.61,0,175,0h0Z"/>
    </clipPath>
  </defs>
  <g class="cls-1">
    <image width="459" height="459" transform="translate(-5.06 -5.04) scale(.24)"...

CSS

BODY {
  background: #7a7d78;
  padding: 10%;
}

SVG {
  filter: saturate(200%) blur(1px);
}

.cls-1 {
  clip-path: url(#clippath);
animation: rotate 500ms linear infinite;
  position: absolute;
  transform-origin: 50px;
}

.cls-2 {
  fill: none;
  stroke-width: 0px;

}

.cls-3 {
  clip-path: url(#clippath-1);
  animation: rotate 500ms linear infinite;
  position: absolute;
  transform-origin:  175px 50px;

}

/* .cls-1 image,
.cls-3 image {
  position: absolute;
  animation: rotate 5s linear infinite;
  Adjust duration and timing function as needed
  transform-origin: center;

} */

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}