Donut Sweep

<!-- Donut Sweep -->
<div class="nuda-donut" role="img" aria-label="Donut chart, 72 percent">
  <svg viewBox="0 0 80 80">
    <circle cx="40" cy="40" r="32" fill="none"
            stroke="rgba(255,255,255,.08)" stroke-width="8" />
    <circle class="nuda-donut__arc" cx="40" cy="40" r="32" fill="none"
            stroke="#e4ff54" stroke-width="8" stroke-linecap="round" />
  </svg>
  <span class="nuda-donut__value">72<i>%</i></span>
</div>

/* Donut Sweep
   Circular gauge filling to a target percentage.
   Customize: --donut-color, --donut-track, --donut-size, --donut-thickness */

.nuda-donut {
  --donut-color: #e4ff54;
  --donut-track: rgba(255, 255, 255, 0.08);
  --donut-size: 96px;
  --donut-thickness: 8px;
  position: relative;
  width: var(--donut-size);
  height: var(--donut-size);
}

.nuda-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 8px rgba(228, 255, 84, 0.18));
}

.nuda-donut__arc {
  stroke-dasharray: 201;
  stroke-dashoffset: 201;
  animation: nuda-donut-sweep 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.nuda-donut__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 1.25rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
}

.nuda-donut__value i {
  font-size: 0.7rem;
  font-style: normal;
  color: #a1a1aa;
  margin-left: 1px;
}

/* 201 ≈ 2π × 32. For 72%: 201 × 0.28 ≈ 56 (visible portion = 100 - 72) */
@keyframes nuda-donut-sweep {
  0%        { stroke-dashoffset: 201; }
  40%, 75%  { stroke-dashoffset: 56; }
  100%      { stroke-dashoffset: 201; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-donut__arc { stroke-dashoffset: 56; animation: none; }
}