SVG Path Morph

<!-- SVG Path Morph (SMIL <animate> — no JS, no CSS dependency) -->
<div class="nuda-morph-svg" aria-hidden="true">
  <svg viewBox="0 0 100 100" width="80" height="80">
    <path fill="#e4ff54" d="M50,8 L92,50 L50,92 L8,50 Z">
      <animate
        attributeName="d"
        dur="4s"
        repeatCount="indefinite"
        values="M50,8 L92,50 L50,92 L8,50 Z;
                M50,5 C75,5 95,25 95,50 C95,75 75,95 50,95 C25,95 5,75 5,50 C5,25 25,5 50,5 Z;
                M20,15 L80,15 L80,85 L20,85 Z;
                M50,8 L92,50 L50,92 L8,50 Z"
      />
    </path>
  </svg>
</div>

/* SVG Path Morph
   The morph itself lives in the inline SVG <animate> element (SMIL),
   so it is fully dependency-free. CSS only handles layout + a11y.
   Customize: change the path "values" or the <path fill>. */

.nuda-morph-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

@media (prefers-reduced-motion: reduce) {
  /* Freeze the SMIL morph for users who prefer reduced motion. */
  .nuda-morph-svg svg animate {
    display: none;
  }
}