Blob Morph

<!-- Blob Morph -->
<div class="nuda-morph-blob" aria-hidden="true">
  <div class="nuda-morph-blob__shape"></div>
</div>

/* Blob Morph
   Organic border-radius blob that morphs and rotates.
   Customize: --morph-blob-size, --morph-blob-start, --morph-blob-end */

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

.nuda-morph-blob__shape {
  width: var(--morph-blob-size);
  height: var(--morph-blob-size);
  background: linear-gradient(135deg, var(--morph-blob-start), var(--morph-blob-end));
  animation: nuda-morph-blob-spin 6s ease-in-out infinite;
  will-change: border-radius, transform;
}

@keyframes nuda-morph-blob-spin {
  0%   { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0deg); }
  33%  { border-radius: 67% 33% 38% 62% / 55% 62% 38% 45%; transform: rotate(120deg); }
  66%  { border-radius: 38% 62% 56% 44% / 63% 37% 63% 37%; transform: rotate(240deg); }
  100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-morph-blob__shape {
    animation: none;
    border-radius: 50%;
  }
}