Pie Slices

<!-- Pie Slices -->
<div class="nuda-pie" role="img" aria-label="Pie chart">
  <div class="nuda-pie__disc"></div>
  <div class="nuda-pie__hole"></div>
</div>

/* Pie Slices
   Conic-gradient pie with a slow rotate. Edit the gradient stops for your data.
   Customize: --pie-size, --pie-hole, --pie-bg, the conic-gradient stops */

.nuda-pie {
  --pie-size: 96px;
  --pie-hole: 22px;
  --pie-bg: #0e0e10;
  position: relative;
  width: var(--pie-size);
  height: var(--pie-size);
}

.nuda-pie__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Edit stops to match your data: color1 0 X%, color2 X% Y%, ... */
  background: conic-gradient(
    #e4ff54 0 35%,
    rgba(228, 255, 84, 0.55) 35% 60%,
    rgba(228, 255, 84, 0.25) 60% 85%,
    rgba(255, 255, 255, 0.08) 85% 100%
  );
  animation: nuda-pie-spin 6s linear infinite;
  filter: drop-shadow(0 0 8px rgba(228, 255, 84, 0.18));
}

.nuda-pie__hole {
  position: absolute;
  inset: var(--pie-hole);
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--pie-bg) 60%, #1a1a1f);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

@keyframes nuda-pie-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-pie__disc { animation: none; }
}