Gooey Metaball Blobs
Blobs that merge and separate with a gooey metaball effect via CSS contrast filtering.
<div class="goo"><span class="goo-b b1"></span><span class="goo-b b2"></span><span class="goo-b b3"></span></div>body{background:#0d1426}
.goo{position:relative;width:200px;height:120px;filter:url(#none) blur(0)}
.goo{filter:contrast(20)}
.goo-b{position:absolute;top:40px;width:40px;height:40px;border-radius:50%;background:#ff477e;filter:blur(6px)}
.b1{left:20px;animation:g1 3s ease-in-out infinite}
.b2{left:80px;animation:g2 3s ease-in-out infinite}
.b3{left:140px;animation:g1 3s ease-in-out infinite .5s}
@keyframes g1{0%,100%{transform:translateX(0)}50%{transform:translateX(30px)}}
@keyframes g2{0%,100%{transform:translateX(0)}50%{transform:translateX(-30px)}}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.