Gooey Spinner

<!-- Gooey Spinner (SVG filter merges the dots) -->
<div class="nuda-gooey" role="status" aria-label="Loading">
  <svg width="0" height="0" aria-hidden="true">
    <filter id="nuda-gooey-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
      <feColorMatrix in="blur" mode="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" />
    </filter>
  </svg>
  <div class="nuda-gooey__rot">
    <span></span>
    <span></span>
  </div>
</div>

/* Gooey Spinner
   Two dots merge/separate (SVG gooey filter) while the pair rotates.
   Customize: --gooey-color */

.nuda-gooey {
  --gooey-color: #e4ff54;
  position: relative;
  width: 48px;
  height: 48px;
  filter: url(#nuda-gooey-filter);
}

.nuda-gooey__rot {
  position: absolute;
  inset: 0;
  animation: nuda-gooey-rot 1.6s linear infinite;
  will-change: transform;
}

.nuda-gooey__rot span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px;
  border-radius: 50%;
  background: var(--gooey-color);
  will-change: transform;
}

.nuda-gooey__rot span:nth-child(1) { animation: nuda-gooey-a 1.6s ease-in-out infinite; }
.nuda-gooey__rot span:nth-child(2) { animation: nuda-gooey-b 1.6s ease-in-out infinite; }

@keyframes nuda-gooey-rot { to { transform: rotate(360deg); } }
@keyframes nuda-gooey-a {
  0%, 100% { transform: translateX(-12px); }
  50%      { transform: translateX(12px); }
}
@keyframes nuda-gooey-b {
  0%, 100% { transform: translateX(12px); }
  50%      { transform: translateX(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-gooey__rot,
  .nuda-gooey__rot span { animation: none; }
}