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

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

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 

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

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

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

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👨‍💻 

- @code.scientist 

- @codingtorque  

- @codingknights