Animated Star Fill

<div class="nuda-star-fill" role="img" aria-label="4 out of 5 stars">
  <!-- Repeat one of these per star. Add class="is-filled" for filled ones. -->
  <svg viewBox="0 0 24 24" class="is-filled">
    <defs>
      <clipPath id="nuda-sf-clip-1">
        <rect class="nuda-star-fill__clip" x="0" y="0" width="24" height="24" />
      </clipPath>
    </defs>
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
          fill="none" stroke="rgba(255,255,255,.18)" stroke-width="1.4" />
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
          fill="#ffb45e" clip-path="url(#nuda-sf-clip-1)" />
  </svg>
</div>

/* Animated Star Fill
   Each star is two SVG paths: a hollow outline + a filled copy
   masked by an animated clipPath that wipes left to right. */

.nuda-star-fill {
  display: inline-flex;
  gap: 4px;
  padding: 0.625rem 0.875rem;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.nuda-star-fill svg {
  width: 22px;
  height: 22px;
  overflow: visible;
}

.nuda-star-fill__clip {
  transform-origin: left center;
  transform: scaleX(0);
  animation: nuda-sf-clip 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nuda-star-fill svg:nth-child(1) .nuda-star-fill__clip { animation-delay: 0.05s; }
.nuda-star-fill svg:nth-child(2) .nuda-star-fill__clip { animation-delay: 0.18s; }
.nuda-star-fill svg:nth-child(3) .nuda-star-fill__clip { animation-delay: 0.31s; }
.nuda-star-fill svg:nth-child(4) .nuda-star-fill__clip { animation-delay: 0.44s; }

/* Unfilled stars stay empty */
.nuda-star-fill svg:nth-child(5):not(.is-filled) .nuda-star-fill__clip {
  animation: none;
  transform: scaleX(0);
}

@keyframes nuda-sf-clip {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-star-fill__clip {
    animation: none;
    transform: scaleX(1);
  }
  .nuda-star-fill svg:nth-child(5):not(.is-filled) .nuda-star-fill__clip {
    transform: scaleX(0);
  }
}