3D Ring

<div class="nuda-ring-scene" aria-hidden="true">
  <div class="nuda-ring">
    <div class="nuda-ring__segment nuda-ring__segment--1"></div>
    <div class="nuda-ring__segment nuda-ring__segment--2"></div>
    <div class="nuda-ring__segment nuda-ring__segment--3"></div>
    <div class="nuda-ring__segment nuda-ring__segment--4"></div>
    <div class="nuda-ring__segment nuda-ring__segment--5"></div>
    <div class="nuda-ring__segment nuda-ring__segment--6"></div>
  </div>
</div>

/* 3D Ring
   Wireframe sphere made of rotated circles.
   Customize: --ring-color, --ring-size, --ring-speed */

.nuda-ring-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 400px;
  padding: 2rem;
}

.nuda-ring {
  --ring-color: #e4ff54;
  --ring-size: 100px;
  --ring-speed: 6s;
  width: var(--ring-size);
  height: var(--ring-size);
  position: relative;
  transform-style: preserve-3d;
  animation: nuda-ring-spin var(--ring-speed) linear infinite;
}

.nuda-ring__segment {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(228, 255, 84, 0.2);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.nuda-ring__segment--1 { transform: rotateX(0deg); }
.nuda-ring__segment--2 { transform: rotateX(30deg); }
.nuda-ring__segment--3 { transform: rotateX(60deg); }
.nuda-ring__segment--4 { transform: rotateX(90deg); }
.nuda-ring__segment--5 { transform: rotateX(120deg); }
.nuda-ring__segment--6 { transform: rotateX(150deg); }

@keyframes nuda-ring-spin {
  from { transform: rotateY(0deg) rotateX(0deg); }
  to { transform: rotateY(360deg) rotateX(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-ring {
    animation: none;
    transform: rotateY(30deg) rotateX(30deg);
  }
}