리퀴드 모션

<div class="stage">
  <svg width="0" height="0"><filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8"/><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9"/></filter></svg>
  <div class="goo-wrap">
    <div class="blob b1"></div>
    <div class="blob b2"></div>
    <div class="blob b3"></div>
  </div>
</div>

.stage{position:absolute;inset:0;overflow:hidden}
.goo-wrap{position:absolute;inset:0;filter:url(#goo)}
.blob{position:absolute;top:50%;border-radius:50%;background:var(--accent)}
.b1{left:50%;width:clamp(30px,13vmin,60px);height:clamp(30px,13vmin,60px);margin:calc(clamp(30px,13vmin,60px) / -2) 0 0 calc(clamp(30px,13vmin,60px) / -2);
  animation:drift1 3.6s ease-in-out infinite}
.b2{left:50%;width:clamp(20px,9vmin,42px);height:clamp(20px,9vmin,42px);margin:calc(clamp(20px,9vmin,42px) / -2) 0 0 calc(clamp(20px,9vmin,42px) / -2);
  background:var(--accent-2);animation:drift2 3.6s ease-in-out infinite}
.b3{left:50%;width:clamp(16px,7vmin,32px);height:clamp(16px,7vmin,32px);margin:calc(clamp(16px,7vmin,32px) / -2) 0 0 calc(clamp(16px,7vmin,32px) / -2);
  background:var(--accent-3);animation:drift3 3.6s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(-30%,0) scale(1)}50%{transform:translate(10%,-10%) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(30%,10%) scale(1)}50%{transform:translate(-6%,4%) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate(6%,26%) scale(1)}50%{transform:translate(-14%,-6%) scale(1.1)}}