Clip-Path Morph

<!-- Clip-Path Morph -->
<div class="nuda-morph-clip" aria-hidden="true">
  <div class="nuda-morph-clip__shape"></div>
</div>

/* Clip-Path Morph
   Cycles through polygon shapes and a circle via animated clip-path.
   Customize: --morph-clip-size, --morph-clip-start, --morph-clip-end */

.nuda-morph-clip {
  --morph-clip-size: 72px;
  --morph-clip-start: #e4ff54;
  --morph-clip-end: #a3b830;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.nuda-morph-clip__shape {
  width: var(--morph-clip-size);
  height: var(--morph-clip-size);
  background: linear-gradient(135deg, var(--morph-clip-start), var(--morph-clip-end));
  animation: nuda-morph-clip-cycle 5s ease-in-out infinite;
  will-change: clip-path;
}

@keyframes nuda-morph-clip-cycle {
  0%   { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
  25%  { clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); }
  50%  { clip-path: circle(50% at 50% 50%); }
  75%  { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); }
  100% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-morph-clip__shape {
    animation: none;
    clip-path: circle(50% at 50% 50%);
  }
}