6 Blob Animation effects using HTML and CSS Only – Coding Torque

Share your love

Blob Animation effects

Hello Coders! Welcome to Coding Torque. In this blog, We are going to create 6 different blob animation effects using HTML & CSS Only. Let’s get started ๐Ÿš€.

Demo

1. Blended photo and gradient blob animation

Code Credits: @markmiscavage

HTML(PUG) Code

.main
.blob

CSS(SCSS) Code
$background_color: #000;
$time: 30s;

.blob {
display: block;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 48% 52% 68% 32% / 42% 28% 72% 58%;
background: linear-gradient(to right, #23D5AB, #23A6D5, #E73C7E, #EE7752, #DDD6F3);
background-size: 500% 100%;
animation:
blobber $time 0s linear infinite,
cobler $time 0s linear infinite alternate;

&:after {
content: '';
display: block;
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
background-color: #000;
background-image: url(https://images.unsplash.com/photo-1495429789562-21d697f29b02?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
mix-blend-mode: multiply;
animation:
blobber $time 0s ease-in-out infinite,
wobbler 15s 0s linear infinite alternate;
}
}

@keyframes blobber {
0% { border-radius: 48% 52% 68% 32% / 42% 28% 72% 58%; }
5% { border-radius: 48% 52% 41% 59% / 66% 37% 63% 34%; }
10% { border-radius: 69% 31% 71% 29% / 67% 31% 69% 33%; }
15% { border-radius: 60% 40% 71% 29% / 63% 65% 35% 37%; }
20% { border-radius: 61% 39% 51% 49% / 57% 58% 42% 43%; }
25% { border-radius: 66% 34% 25% 75% / 47% 30% 70% 53%; }
30% { border-radius: 32% 68% 38% 62% / 65% 60% 40% 35%; }
35% { border-radius: 63% 37% 41% 59% / 35% 38% 62% 65%; }
40% { border-radius: 57% 43% 49% 51% / 55% 71% 29% 45%; }
45% { border-radius: 47% 53% 34% 66% / 65% 36% 64% 35%; }
50% { border-radius: 44% 56% 32% 68% / 69% 26% 74% 31%; }
55% { border-radius: 28% 72% 37% 63% / 71% 44% 56% 29%; }
60% { border-radius: 38% 62% 35% 65% / 74% 53% 47% 26%; }
65% { border-radius: 73% 27% 46% 54% / 54% 47% 53% 46%; }
70% { border-radius: 75% 25% 47% 53% / 49% 53% 47% 51%; }
75% { border-radius: 62% 38% 43% 57% / 55% 60% 40% 45%; }
80% { border-radius: 41% 59% 65% 35% / 73% 50% 50% 27%; }
85% { border-radius: 55% 45% 57% 43% / 73% 61% 39% 27%; }
90% { border-radius: 74% 26% 33% 67% / 40% 65% 35% 60%; }
95% { border-radius: 58% 42% 57% 43% / 53% 45% 55% 47%; }
100%{ border-radius: 48% 52% 68% 32% / 42% 28% 72% 58%; }
}

@keyframes cobler {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}

@keyframes wobbler {
0% {
transform: rotateZ(8deg);
}
100% {
transform: rotateZ(-8deg);
}
}

//
// Page Default Styles
//

* {
margin: 0;
padding: 0;
border: 0;
outline: none;
box-sizing: border-box;
}

html,
body {
display: block;
position: fixed;
height: 100vh;
width: 100vw;
background-color: $background_color;
background: linear-gradient(#1f1f21, $background_color);
}

.main {
display: flex;
height: 100vh;
width: 100vw;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
}

2. An animated blobby gooey button using CSS

An animated blobby gooey button using CSS
Code Credits: @leenalavanya
HTML Code
<svg viewBox="45 60 400 320" xmlns="http://www.w3.org/2000/svg">
<path fill="#fff" d="M 90 210 C 90 180 90 150 90 150 C 150 150 180 150 180 150 C 180 150 300 150 300 150 C 300 150 330 150 390 150 C 390 150 390 180 390 210 C 390 240 390 270 390 270 C 330 270 300 270 300 270 C 300 270 180 270 180 270 C 180 270 150 270 90 270 C 90 270 90 240 90 210" mask="url(#knockout-text)" >
</path>
<mask id="knockout-text">
<rect width="100%" height="100%" fill="#fff" x="0" y="0" />
<text x="147" y="227" fill="#000">BUTTON</text>
</mask>
</svg>

CSS(SCSS) Code

@import url("https://fonts.googleapis.com/css?family=Raleway:900");

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-image:
url(https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=1600);
background-size: cover;
background-position: 50% 50%;
min-height:
100vh;
font-family: Raleway, serif;
&

:after {
content: "";
width:
100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
}
}

svg {
width: 80vw;
position: fixed;
top: 50vh;
left:
50vw;
max-width: 430px;
transform: translateY(-50%) translateX(-50%);
z-index: 2;
filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.3));

path {
cursor: pointer;
animation: blob 2s infinite forwards;
transform-origin: 50% 50%;
&

:hover {
fill: #fafafa;
}
}

text {
font-size: 45px;
}
}

@keyframes blob {
25% {
d: path("M 90 210 C 90
180 110 160 130 160 C 160 160 180 140 200 130 C 230 120 270 100 290 140 C 310 170 340 100 360 140 C 370 160 390 180 390 210 C 390 240 380 290 350 280 C 330 270 300 280 280 290 C 260 300 230 300 220 290 C 200 270 160 310 140 280 C 130 260 90 240 90 210 " ); transform:
rotate(-5deg);
}

50% {
d: path("M 90 210 C 90 180 100 150 120 130 C
150 100 180 140 200 130 C 230 120 270 100 290 140 C 300 160 330 130 360 140 C 390 150 390 180 390 210 C 390 240 380 300 350 280 C 330 270 320 230 280 260 C 260 280 220 310 200 290 C 180 270 160 280 140 280 C 110 280 90 240 90 210" ); } 75% { d: path( " M 90 210 C 90 180 110 180 130 170 C 150 160 170 130 200 130 C 240 130 260 150 290 140 C 310 130 340 120 360 140 C 380 160 390 180 390 210 C 390 240 380 260 350 270 C 320 280 290 270 270 260 C 240 250 230 280 210 290 C 180 310 130 300 110 280 C 90 260 90 240 90 210" ); transform: rotate(5deg); } }

3. Border Radius Blob using HTML 

Border Radius Blob using HTML
Code Credits: @karisabinemalmin
HTML Code

<div class="wrap">

<div class="circle">
<img src='https://images.unsplash.com/photo-1547542928-dd9bc5371279?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
</div>

CSS(SCSS) Code
body {
background: #000;
}

.wrap {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.circle {
background: plum;
width: 200px;
height: 200px;
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
overflow: hidden;
animation: morph 3s linear infinite;
}

.circle img {
width: 100%;
}


@keyframes morph{
0%, 100% {
border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
}
34% {
border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
}
67% {
border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
}
}

4. Blob Loading Animation using CSS

Blob Loading Animation using CSS
Code Credits: @marcossilva
HTML Code

<div class="wrapper">
<p><span></span></p>
<p><span></span></p>
</div>

CSS(SCSS) Code
.wrapper {
--size: 250px;
position: absolute;
width: var(--size);
height: var(--size);
top: 50%;
left: 50%;
margin: calc(var(--size) / -2);
background: white;
filter: blur(10px) contrast(15);

span {
background: black;
position: absolute;
border-radius: 50%;
display:
inline-block;
}

p {
position: absolute;
top: 50%;
left: 50%;
}

p:nth-child(1) {
position: absolute;
animation: skewing-child .2s ease-in-out infinite alternate;

span {
width: calc(var(--size) / 10);
height: calc(var(--size) / 10);
margin: calc(var(--size) / -20);
;
animation: moving 2s cubic-bezier(.97, .01, .12, .99) infinite alternate;
}
}

p:nth-child(2) {
position: absolute;
animation: squishing 1s ease-in-out infinite alternate;

span {
width: calc(var(--size) / 4);
height: calc(var(--size) / 4);
top: 50%;
left: 50%;
margin:
calc(var(--size) / -8);
animation: skewing 2s 1.5s ease-in-out infinite;
}
}
}

@keyframes skewing {
0% {
transform: skewX(6deg);
}

10% {
transform: skewX(-6deg);
}

20% {
transform: skewX(4deg);
}

30% {
transform: skewX(-4deg);
}

40% {
transform: skewX(2deg);
}

50% {
transform: skewX(-6deg);
}

55% {
transform: skewX(6deg);
}

60% {
transform: skewX(-5deg);
}

65% {
transform: skewX(5deg);
}

70% {
transform: skewX(-4deg);
}

75% {
transform: skewX(4deg);
}

80% {
transform: skewX(-3deg);
}

85% {
transform: skewX(3deg);
}

90% {
transform: skewX(-2deg);
}

95% {
transform: skewX(2deg);
}

100% {
transform: skewX(1deg);
}
}

@keyframes skewing-child {
0% {
transform:
skewX(-10deg);
}

100% {
transform: skewX(10deg);
}
}

@keyframes moving {
0% {
transform: translate(calc(var(--size) / -2.5));
}

30% {
transform:
translate(calc(var(--size) / -10));
}

70% {
transform:
translate(calc(var(--size) / 10));
}

100% {
transform:
translate(calc(var(--size) / 2.5));
}
}

@keyframes squishing {

10%,
40%,
80% {
transform: scale(1, .9);
}

0%,
30%,
60%,
100% {
transform:
scale(.9, 1);
}
}

5. Dashing Blob Ball

Dashing Blob Ball
Code Credits: @sasi-jj
HTML Code
<div class="scene">
<div class="cage">
<div class="ball">
</div>
</div>
</div>


CSS Code

*{
margin:0px;
padding:0px;
}

.scene{
position:relative;
width:100vw;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background: #8E2DE2; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #4A00E0, #8E2DE2); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #4A00E0, #8E2DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.cage{
position:relative;
display:flex;
justify-content:center;
align-items:center;
width:200px;
height:200px;
}

.cage::before{
content:"";
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:rgba(251,251,251,0.08);
animation-name: rotate;
animation-duration: 1.5s;
animation-iteration-count:infinite;
box-shadow: -20px -20px 10px 0px rgba(0, 0, 0, 0.05),5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.cage::after{
content:"";
position:absolute;
bottom:10px;
width:100%;
}

.ball{
position:relative;
width:20px;
height:20px;
border-radius:50%;
background: #f12711; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #f5af19, #f12711); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

animation-name: dash;
animation-duration: 1.5s;
animation-iteration-count:infinite;
}

@keyframes dash {
0% {left:0px}
10% {left:25px;height:22px;width:17px;border-radius:25px;}
15% {height:20px;width:20px}
30% {border-radius:25px;height:17px;width:60px;}
45% {left:-90px;height:22px;width:17px;border-radius:25px;}
70% {border-radius:50%}
80% {height:20px;width:20px}
100% {left:0px;}
}

@keyframes rotate {
0% {left:0px;transform:rotate(0deg)}
33% {left:0px;transform:rotate(0deg)}
36% {left:-60px;transform:rotate(0deg);border-bottom-left-radius: 0%;border-top-left-radius: 0%;}
45% {transform:rotate(-45deg);border-bottom-left-radius: 50%;border-top-left-radius: 20%;}
100% {left:0px;transform:rotate(0deg);border-bottom-left-radius: 0%;border-top-left-radius: 0%;}
}

6. Draggable Blob using HTML, CSS & JS

Draggable Blob using HTML, CSS & JS
Code Credits: @maaarj
HTML Code
<div class="glowy-blob">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<span>Drag</span>

<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 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
CSS(SCSS) Code
@import 'compass/css3';
@import url('https://fonts.googleapis.com/css?family=Chewy|Gloria+Hallelujah');
$bg : #121327;
html { height:100%; width:100%; }
body{
margin:0;
padding:0;
height:100%;
width:100%;
background:$bg;
overflow:hidden;
@include filter(hue-rotate(0deg));
@include animation(huerot 5s ease infinite )
}
/** end for goo container **/
@function randomNum($min, $max) {
$rand: random();
$randomNum: $min + floor($rand * (($max - $min) + 1));
@return $randomNum;
}

$color:#fff;
$color2:#5048A0;
$color3:#85EDE8;
$color4:#48098b;
.glowy-blob {
position:absolute;
left:50%;
top:50%;
@include transform(translate(-50,-50));
@include filter(url('#goo'));
div {
width:80px;
height: 80px;
background:$color3;
@include border-radius(500px);
display: inline-block;
position:absolute;
box-shadow:0px 0px 50px $color3;
$top-collection: 0;
$left-collection: 0;

@for $i from 2 to 17 {
$left: randomNum(-60px, 60px);
$top: randomNum(-60px, 60px);
$randWH : randomNum(30px, 60px);
&:nth-child(#{$i}) {
width:$randWH;
height: $randWH;
left:$left;
}

$left-collection: append($left-collection,$left);
$top-collection: append($top-collection,$top);
}

@for $i from 1 to length($top-collection) {
&:nth-child(#{$i}) {
top: 0;
left: 0;
@include animation(anim-#{$i} 2.5s ease-in-out infinite);
@if($i == 1) {
@include animation-delay(0s);
}
@else {
@include animation-delay(randomNum(1s,3s));
}
}
/**keyframes **/
@include keyframes(anim-#{$i}) {
0%{left:0;top:0}
50% { left:nth($left-collection, $i+1);top:nth($top-collection, $i)}
100%{left:0;top:0}
}
} //end of collection loop
&:hover {
cursor:default;
}
} //end of div

} //end of glowby-blob

span {
color:$color3;
opacity: 0.5;
font-size: 24px;
font-family:'Chewy';
font-weight: bolder;
text-transform: uppercase;
letter-spacing:1px;
position: absolute;
left:50%;
top:30%;
@include transform(translate(-50,-50));
-webkit-touch-callout: none; /* iOS Safari */
@include user-select(none);
&:hover {
cursor:default;
}
}

@include keyframes(huerot) {
0%{@include filter(hue-rotate(0deg));}
100%{@include filter(hue-rotate(360deg));}
}
@include keyframes(bounceback) {
100%{left:0;top:0}
}



JavaScript Code

var doms = document.getElementsByClassName("glowy-blob"); var
selected = 0; for(var x =0;x<doms.length;x++) { for(var i =
0;i<doms[x].children.length;i++) {
doms[x].children[i].addEventListener("mousedown", function(e){
selected = this; }) } } window.addEventListener("mouseup",
function(e){ selected.style.animation = "bounceback 1s ease";
selected.style.animationFillMode = "forwards"; var lala = selected;
selected = null; setTimeout(function() { lala.style.animation = "";
lala.style.animationFillMode = ""; lala.style.left = "";
lala.style.top = ""; },1000) }) window.addEventListener("mousemove",
function(e) { if(selected == null || !selected) return;
selected.style.left = (e.clientX -
(selected.getBoundingClientRect().width/2) - window.innerWidth/2)
+"px" selected.style.top = (e.clientY -
(selected.getBoundingClientRect().height/2) - window.innerHeight/2 )
+"px" selected.style.animation = 0; })

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

 If you have any doubt or any project ideas feel free to Contact Us 

Hope you find this post helpful๐Ÿ’– 

 Written by: Coding Torque | Piyush Patil 

 Follow us on Instagram for more projects like this๐Ÿ‘จโ€๐Ÿ’ป 
Share your love