Organic Merge Animation
Home
Snippets
Organic Merge Animation
HTML
CSS
JS
<svg width="0" height="0"> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="12" 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 20 -10" result="goo"/> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </svg> <div class="gooey" id="gooey"> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> </div> <div class="label">GOOEY METABALLS</div>
body { margin: 0; height: 100vh; background: radial-gradient(circle, #060606, #000); display: grid; place-items: center; overflow: hidden; font-family: system-ui, sans-serif; } .gooey { width: 300px; height: 300px; filter: url(#goo); position: relative; } .ball { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: #7cffcb; box-shadow: 0 0 25px rgba(124,255,203,0.8); } .label { position: absolute; bottom: 24px; color: rgba(255,255,255,0.6); font-size: 12px; letter-spacing: 3px; }
const balls = document.querySelectorAll('.ball'); const area = 240; let t = 0; function animate() { balls.forEach((ball, i) => { const angle = t * 0.02 + i * Math.PI * 2 / balls.length; const x = 120 + Math.cos(angle) * area / 3; const y = 120 + Math.sin(angle * 1.3) * area / 3; ball.style.transform = `translate(${x}px, ${y}px)`; }); t++; requestAnimationFrame(animate); } animate();
Ad #1
Ad #2
Scroll to Top