Heart Fill

<button class="nuda-icon-heart" type="button" aria-label="Favourite" aria-pressed="false">
  <svg class="nuda-icon-heart__svg" viewBox="0 0 24 24" aria-hidden="true">
    <path class="nuda-icon-heart__path"
      d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
  </svg>
</button>

/* Heart Fill
   Outline → solid lime with a spring pop on activate.
   GPU-only: transform + fill/stroke colour. Customize: --icon-accent */

.nuda-icon-heart {
  --icon-accent: #e4ff54;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #09090b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #71717a;
  cursor: pointer;
  transition: border-color 0.25s;
}

.nuda-icon-heart:hover,
.nuda-icon-heart:focus-visible {
  border-color: rgba(228, 255, 84, 0.4);
  outline: none;
}

.nuda-icon-heart:focus-visible {
  box-shadow: 0 0 0 2px rgba(228, 255, 84, 0.5);
}

.nuda-icon-heart__svg { width: 24px; height: 24px; }

.nuda-icon-heart__path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.25s, stroke 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  will-change: transform;
}

.nuda-icon-heart[aria-pressed="true"] .nuda-icon-heart__path {
  fill: var(--icon-accent);
  stroke: var(--icon-accent);
}

.nuda-icon-heart--pop .nuda-icon-heart__path {
  animation: icon-heart-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes icon-heart-pop {
  0%   { transform: scale(0.7); }
  45%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-icon-heart__path { transition: fill 0.25s, stroke 0.25s; }
  .nuda-icon-heart--pop .nuda-icon-heart__path { animation: none; }
}

/* Heart Fill — vanilla JS
   Flips aria-pressed and triggers the pop class. */

(function () {
  document.querySelectorAll(".nuda-icon-heart").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var fav = btn.getAttribute("aria-pressed") !== "true";
      btn.setAttribute("aria-pressed", String(fav));
      if (fav) {
        btn.classList.add("nuda-icon-heart--pop");
        setTimeout(function () {
          btn.classList.remove("nuda-icon-heart--pop");
        }, 450);
      }
    });
  });
})();