Kaleidoscope

<!-- Kaleidoscope — two mirrored conic-gradient rings rotate slowly in
     opposite directions around a fixed lime core, fracturing it into a
     kaleidoscope pattern. Smooth, continuous, no strobing. -->
<div class="nuda-gd2-kaleidoscope">
  <span class="nuda-gd2-kaleidoscope__core" aria-hidden="true"></span>
  <span class="nuda-gd2-kaleidoscope__ring" aria-hidden="true"></span>
  <span class="nuda-gd2-kaleidoscope__ring nuda-gd2-kaleidoscope__ring--b" aria-hidden="true"></span>
</div>

.nuda-gd2-kaleidoscope {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #09090b;
}

.nuda-gd2-kaleidoscope__core {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e4ff54;
  box-shadow: 0 0 16px rgba(228,255,84,.6);
  z-index: 2;
}

.nuda-gd2-kaleidoscope__ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,rgba(228,255,84,.22) 0 30deg,transparent 30deg 60deg,rgba(0,229,255,.18) 60deg 90deg,transparent 90deg 120deg,rgba(255,0,212,.18) 120deg 150deg,transparent 150deg 180deg,rgba(228,255,84,.22) 180deg 210deg,transparent 210deg 240deg,rgba(0,229,255,.18) 240deg 270deg,transparent 270deg 300deg,rgba(255,0,212,.18) 300deg 330deg,transparent 330deg 360deg);
  mix-blend-mode: screen;
  animation: _nuda-gd2kaleidoscope-a 14s linear infinite;
}

.nuda-gd2-kaleidoscope__ring--b {
  inset: 20%;
  opacity: .7;
  animation-name: _nuda-gd2kaleidoscope-b;
  animation-duration: 10s;
}

@keyframes _nuda-gd2kaleidoscope-a {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes _nuda-gd2kaleidoscope-b {
  0% {
    transform: rotate(0deg) scaleX(-1);
  }
  100% {
    transform: rotate(-360deg) scaleX(-1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-gd2-kaleidoscope__ring {
    animation: none;
    transform: rotate(0deg);
  }
  .nuda-gd2-kaleidoscope__ring--b {
    transform: scaleX(-1);
  }
}