JSFiddle - React, Tailwind, and code Playground

by James Connolly

HTML

<svg class="circles" xmlns="http://www.w3.org/2000/svg" width="314" height="314" viewBox="0 0 314 314">
  <defs>
    <linearGradient id="bg-circles-a" x1="96.415%" x2="0%" y1="37.142%" y2="59.123%">
      <stop offset="0%" stop-color="#ACB5C3" stop-opacity="0" />
      <stop offset="40.715%" stop-color="#ACB5C3" />
      <stop offset="50.763%" stop-color="#E4E4E8" />
      <stop offset="57.351%" stop-color="#ACB5C3" />
      <stop offset="100%" stop-color="#ACB5C3" stop-opacity="0" />
    </linearGradient>
    <linearGradient id="bg-circles-b" x1="65.177%" x2="39.039%" y1="100%" y2="0%">
      <stop offset="0%" stop-color="#ACB5C3" stop-opacity="0" />
      <stop offset="40.715%" stop-color="#ACB5C3" />
      <stop offset="50.763%" stop-color="#E4E4E8" />
      <stop offset="57.351%" stop-color="#ACB5C3" />
      <stop offset="100%" stop-color="#ACB5C3" stop-opacity="0" />
    </linearGradient>
    <linearGradient id="bg-circles-c" x1="50%" x2="65.492%" y1="61.144%" y2="100.731%">
      <stop offset="0%" stop-color="#ACB5C3" stop-opacity="0" />
      <stop offset="100%" stop-color="#ACB5C3" stop-opacity=".3" />
    </linearGradient>
    <linearGradient id="bg-circles-d" x1="44.222%" x2="65.492%" y1="50%" y2="100.731%">
      <stop offset="0%" stop-color="#ACB5C3" stop-opacity="0" />
      <stop offset="100%" stop-color="#ACB5C3" stop-opacity=".3" />
    </linearGradient>
  </defs>
  <g fill="none">
    <path fill="url(#bg-circles-a)" d="M157,314 C243.708706,314 314,243.708706 314,157 C314,70.2912943 243.708706,0 157,0 C70.2912943,0 0,70.2912943 0,157 C0,243.708706 70.2912943,314 157,314 Z M157,313 C70.843579,313 1,243.156421 1,157 C1,70.843579 70.843579,1 157,1 C243.156421,1 313,70.843579 313,157 C313,243.156421 243.156421,313 157,313 Z" opacity=".514" />
    <path fill="url(#bg-circles-b)" d="M157,239 C202.287349,239 239,202.287349 239,157 C239,111.712651 202.287349,75 157,75 C111.712651,75 75,111.712651 75,157 C75,202.287349 111.712651,239 157,239 Z M157,238...

SCSS

.circles {
	background-color: navy;
  //width: 750px;
  //animation: circles-anim 5s ease-in-out infinite;
	
	path {
		//transform-origin: 50% 50%;
		
		&:nth-child(1) {
			animation: circles-anim-1 9s ease-in-out infinite;
		}
		
		&:nth-child(2) {
			animation: circles-anim-1 6s ease-in-out infinite;
		}
		
		&:nth-child(3) {
			animation: circles-anim-2 8s ease-in-out infinite;
		}
		
		&:nth-child(4) {
			animation: circles-anim-2 5s ease-in-out infinite;
		}
	}
}

// animations

@keyframes circles-anim-1 {
  0% {
    transform: rotate(0deg);
		transform-origin: 50% 50%;
  }

  100% {
    transform: rotate(360deg);
		transform-origin: 50% 50%;
  }
}

@keyframes circles-anim-2 {
  0% {
    transform: rotate(0deg);
		transform-origin: 50% 50%;
  }

  100% {
    transform: rotate(-360deg);
		transform-origin: 50% 50%;
  }
}