body {
  overflow: hidden;
}

.circles {
  position: relative;
  width: 25em;
  height: 25em;
  filter: blur(0.25em);
}
.circles > .circle {
  --hue: 0;
}
.circles > .circle > .circle {
  --hue: 24;
}
.circles > .circle > .circle > .circle {
  --hue: 48;
}
.circles > .circle > .circle > .circle > .circle {
  --hue: 72;
}
.circles > .circle > .circle > .circle > .circle > .circle {
  --hue: 96;
}
.circles > .circle > .circle > .circle > .circle > .circle > .circle {
  --hue: 120;
}
.circles > .circle > .circle > .circle > .circle > .circle > .circle > .circle {
  --hue: 144;
}
.circles > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle {
  --hue: 168;
}
.circles > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle {
  --hue: 192;
}
.circles > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle {
  --hue: 216;
}
.circles > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle {
  --hue: 240;
}
.circles > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle {
  --hue: 264;
}
.circles > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle {
  --hue: 288;
}
.circles > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle {
  --hue: 312;
}
.circles > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle > .circle {
  --hue: 336;
}

.circle {
  position: absolute;
  left: 0.5em;
  width: calc(100% - 1em);
  height: calc(100% - 1em);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 0.25em solid hsl(var(--hue, 0), 100%, 75%);
  -webkit-animation: circle 12s infinite ease-in-out;
          animation: circle 12s infinite ease-in-out;
}
@-webkit-keyframes circle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes circle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}