JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient gradientTransform="rotate(160.1 237.7 157.7)" gradientUnits="userSpaceOnUse" id="a" x1="208.5" x2="393.5" y1="167.8" y2="167.8">
            <stop offset="0" stop-color="#2e3191" />
            <stop offset=".2" stop-color="#254aa4" />
            <stop offset="1" stop-color="#00adee" />
            <stop offset="1" stop-color="#b0b0bb" />
            <stop offset="1" stop-color="#00adee" />
        </linearGradient>
        <linearGradient id="e" x1="68.6" x2="253.6" xlink:href="#a" y1="163.3" y2="163.3" />
        <linearGradient gradientTransform="rotate(67.1 243.3 195.6)" gradientUnits="userSpaceOnUse" id="f" x1="80.4" x2="265.4" y1="249.9" y2="249.9">
            <stop offset="0" stop-color="#9bca3b" />
            <stop offset="1" stop-color="#279e48" />
        </linearGradient>
        <linearGradient gradientTransform="rotate(160.1 237.7 157.7)" gradientUnits="userSpaceOnUse" id="b" x1="230.2" x2="388.1" y1="170.7" y2="170.7">
            <stop offset="0" stop-color="#ec1c62" />
            <stop offset="1" stop-color="#7d489b" />
        </linearGradient>
        <linearGradient gradientTransform="rotate(27.1 279.7 201)" gradientUnits="userSpaceOnUse" id="c" x1="37.3" x2="262" y1="217.4" y2="217.4">
            <stop offset="0" stop-color="#ffc600" />
            <stop offset="1" stop-color="#f05527" />
        </linearGradient>
        <linearGradient gradientTransform="rotate(-62.6 1.5 221.7)" id="i" x1="11" x2="189.2" xlink:href="#a" y1="355.8" y2="355.8" />
        <linearGradient id="j" x1="75.5" x2="273.4" xlink:href="#b" y1="179.8" y2="179.8" />
        <linearGradient id="k" x1="90.8" x2="288.7" xlink:href="#c" y1="162.7" y2="162.7" />
        <linearGradient gradientTransform="rotate(160.1 237.7 157.7)" gradientUnits="userSpaceOnUse" id="d" x1="208.5" x2="393.5" xlink:href="#a" y1="167.8" y2="167.8" />
   ...

SCSS

svg {
    max-width: 90vw;
    max-height: 90vh;
    $numCircles: 8;
    clipPath {
        path {
            transform-origin: center;
            animation: rotate 5s linear infinite;
        }
        
        /*@for $i from 0 to $numCircles {
          &#clip-#{$i} path {
            animation-delay: random() * -10s;
            animation-duration: (random() * (5 - 3 + 1) + 3);
          }
        }*/
    }
}

@keyframes rotate {
    100% {
        transform: rotateZ(360deg);
    }
}

// JSFiddle doesn't support random() yet
svg clipPath path {
  transform-origin: center;
  animation: rotate 5s linear infinite;
}
svg clipPath#clip-0 path {
  animation-delay: -2.6479936s;
  animation-duration: 5.13571254;
}
svg clipPath#clip-1 path {
  animation-delay: -9.648015s;
  animation-duration: 5.97270305;
}
svg clipPath#clip-2 path {
  animation-delay: -4.72477811s;
  animation-duration: 3.86384362;
}
svg clipPath#clip-3 path {
  animation-delay: -3.28357594s;
  animation-duration: 3.79351697;
}
svg clipPath#clip-4 path {
  animation-delay: -0.93514744s;
  animation-duration: 4.61756685;
}
svg clipPath#clip-5 path {
  animation-delay: -4.29583706s;
  animation-duration: 3.06111057;
}
svg clipPath#clip-6 path {
  animation-delay: -4.56166767s;
  animation-duration: 3.65199964;
}
svg clipPath#clip-7 path {
  animation-delay: -9.35334673s;
  animation-duration: 4.15939785;
}