JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<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>
      .cls-1 {
        clip-path: url(#clippath);
      }

      .cls-2 {
        fill: none;
      }

      

      .cls-4 {
        clip-path: url(#clippath-1);
      }
    </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 {
  stroke-width: 0px;
  animation: blend 500ms linear infinite;
  transition: fill 250ms ease-in-out;
}

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

.cls-5 {
  animation: r2l 4000ms linear infinite;
}

.cls-6 {
  animation: l2r 4000ms linear infinite;
}

@keyframes r2l {
  from {
    transform: translateX(5px);
  }

  to {
    transform: translateX(-5px);
  }
}

@keyframes l2r {
  from {
    transform: translateX(-5px);
  }

  to {
    transform: translateX(5px);
  }
}

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

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

@keyframes blend {
  0% {
    fill: #0000ff;
  }
  14.29% {
    fill: #00ffff;
  }
  28.57% {
    fill: #00ff00;
  }
  42.86% {
    fill: #ffff00;
  }
  57.14% {
    fill: #ff0000;
  }
  71.43% {
    fill: #ff00ff;
  }
  85.71% {
    fill: #0000ff;
  }
  100% {
    fill: #0000ff;
  }
}