Magnetic Orbit Field

<!-- Magnetic Orbit Field -->
<div class="nuda-pt2-magnetic-orbit" role="img" aria-label="Particles orbiting a magnetic center">
  <span class="nuda-pt2-magnetic-orbit__core" aria-hidden="true"></span>
  <span class="nuda-pt2-magnetic-orbit__ring" style="--r:28px; --dur:5s; --a0:0deg;   --dir:1"></span>
  <span class="nuda-pt2-magnetic-orbit__ring" style="--r:37px; --dur:6s; --a0:60deg;  --dir:-1"></span>
  <span class="nuda-pt2-magnetic-orbit__ring" style="--r:46px; --dur:7s; --a0:120deg; --dir:1"></span>
  <span class="nuda-pt2-magnetic-orbit__ring" style="--r:55px; --dur:8s; --a0:180deg; --dir:-1"></span>
  <span class="nuda-pt2-magnetic-orbit__ring" style="--r:64px; --dur:9s; --a0:240deg; --dir:1"></span>
  <span class="nuda-pt2-magnetic-orbit__ring" style="--r:73px; --dur:10s;--a0:300deg; --dir:-1"></span>
</div>

.nuda-pt2-magnetic-orbit {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-pt2-magnetic-orbit__core {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e4ff54;
  box-shadow: 0 0 10px #e4ff54,0 0 22px rgba(228,255,84,.5);
  animation: _nuda-pt2magneticorbitcore 2.4s ease-in-out infinite;
}

.nuda-pt2-magnetic-orbit__ring {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fafafa;
  box-shadow: 0 0 5px rgba(228,255,84,.6);
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
  transform: rotate(var(--a0)) translateX(var(--r));
  animation: _nuda-pt2magneticorbitspin var(--dur) linear infinite;
}

@keyframes _nuda-pt2magneticorbitspin {
  from {
    transform: rotate(var(--a0)) translateX(var(--r)) rotate(0deg) scale(calc(var(--dir) * 1));
  }
  to {
    transform: rotate(calc(var(--a0) + (360deg * var(--dir)))) translateX(var(--r)) rotate(calc(360deg * -1 * var(--dir))) scale(calc(var(--dir) * 1));
  }
}

@keyframes _nuda-pt2magneticorbitcore {
  0%,100% {
    transform: scale(.85);
  }
  50% {
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-pt2-magnetic-orbit__ring,.nuda-pt2-magnetic-orbit__core {
    animation: none !important;
  }
  .nuda-pt2-magnetic-orbit__ring {
    transform: rotate(var(--a0)) translateX(var(--r));
  }
}