bulles qui fusionnent grâce à un filtre SVG “gooey”. Très “liquid” et vivant.

<!-- 4) Gooey Loader -->
<div class="fx4-goo">
  <svg viewBox="0 0 200 60">
    <defs>
      <filter id="fx4-goo">
        <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="b"/>
        <feColorMatrix in="b" mode="matrix"
          values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="goo"/>
        <feBlend in="SourceGraphic" in2="goo"/>
      </filter>
    </defs>
    <g filter="url(#fx4-goo)">
      <circle class="c" cx="30" cy="30" r="10"/>
      <circle class="c" cx="60" cy="30" r="10"/>
      <circle class="c" cx="90" cy="30" r="10"/>
      <circle class="c" cx="120" cy="30" r="10"/>
      <circle class="c" cx="150" cy="30" r="10"/>
    </g>
  </svg>
</div>

<style>
.fx4-goo{ background:#fff; padding:16px; border-radius:16px; display:inline-block; }
.fx4-goo svg{ width:260px; height:auto; }
.fx4-goo .c{ fill:#0a84ff; opacity:.85; }
.fx4-goo .c:nth-child(1){ animation: fx4 1.2s ease-in-out infinite; }
.fx4-goo .c:nth-child(2){ animation: fx4 1.2s .1s ease-in-out infinite; }
.fx4-goo .c:nth-child(3){ animation: fx4 1.2s .2s ease-in-out infinite; }
.fx4-goo .c:nth-child(4){ animation: fx4 1.2s .3s ease-in-out infinite; }
.fx4-goo .c:nth-child(5){ animation: fx4 1.2s .4s ease-in-out infinite; }
@keyframes fx4{ 0%,100%{ r:10 } 50%{ r:17 } }

@media (prefers-reduced-motion: reduce){
  .fx4-goo .c{ animation:none; }
}
</style>