CSS Blobs

by kthornbloom

HTML

<br><br>
    
    <div class="blobwrap">
    <div class="blob1"></div>
    <div class="blob2"></div>
    <div class="blob3"></div>
        <div class="blob4"></div>
    </div>


<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" 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 -2" result="goo" /><feBlend in="SourceGraphic" in2="goo" /></filter></defs></svg>

CSS

body, html {
   background: radial-gradient(ellipse at center, #333 0%,#000 100%);
    height:100%;
    width:100%;
    padding:0;
    margin:0;
}

@keyframes blob1 {
    0% {
        transform: rotate(0deg) translate(30px) scale(.2);
    }
    50% {
        transform: rotate(360deg) translate(40px) scale(2);
    }
    100% {
        transform: rotate(720deg) translate(30px) scale(.2);
    }
}

.blobwrap {    
    -webkit-filter:url('#goo');
    position:absolute;;
     width:100px;
    height:100px;
    left:50%;
    top:50%;
    padding:50px;
    transform:translateX(-50%) translateY(-50%);
}
.blob1 {
    background:#fff;
    width:15px;    
    height:15px;
    left:50%;    
    top:50%;
    border-radius:40px;
    position:absolute;
    animation:blob1 3s infinite linear;
}
.blob2 {
    background:#fff;
    width:15px;
    height:15px;
    border-radius:10px;
    position:absolute;
    left:45%;    
    top:50%;
    animation:blob1 5s infinite linear;
}
.blob3 {
    background:#fff;
    width:15px;
    height:15px;
    border-radius:10px;
    position:absolute;
    left:55%;    
    top:50%;
    animation:blob1 2s infinite linear;
    -webkit-animation-direction: reverse;
}
.blob4 {
    background:#fff;
    width:15px;
    height:15px;
    border-radius:10px;
    position:absolute;
    left:55%;    
    top:50%;
    animation:blob1 6s infinite linear;
    -webkit-animation-direction: reverse;
}