<div class="blobs">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></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 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>

@import "compass/css3";

body{
  background:white;
  background-image:url(https://i.imgur.com/d47ZIU3.jpg);
  background-size:cover;
}
.blobs{
  filter:url('#goo');
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
}
$dist-x:50%;
$dist-y:50%;
@keyframes blob-left-top-anim{
  0%{
    transform:scale(1) translate(0,0);
  }
  25%{
    transform:scale(0.5) translate(-$dist-x,-$dist-y);
  }
  50% {
        transform:scale(1) translate(0,0);
  }
  75%{    
    transform:scale(0.5) translate($dist-x,$dist-y);
  }
  100%{
    transform:scale(1) translate(0,0);
  }
}

@keyframes blob-right-top-anim{
  0%{
    transform:scale(1) translate(0,0);
  }
  35%{
    transform:scale(0.5) translate(0,-$dist-y);
  }
  50%{
    transform:scale(1) translate(0,0);
  }
  85%{
    transform:scale(0.5) translate(0,$dist-y);
  }
  100%{
    transform:scale(1) translate(0,0);
  }
}
@keyframes blob-left-bottom-anim{
  0%{
    transform:scale(1) translate(0,0);
  }
  25%{
    transform:scale(0.5) translate(-$dist-x,0);
  }
  50%{
    transform:scale(1) translate(0,0);
  }
  75%{
    transform:scale(0.5) translate($dist-x,0);
  }
  100%{
    transform:scale(1) translate(0,0);
  }
}

@keyframes blob-right-bottom-anim{
  0%{
    transform:scale(1) translate(0,0);
  }
  25%{
    transform:scale(0.5) translate($dist-x,-$dist-y);
  }
  50%{
    transform:scale(1) translate(0,0);
  }
  75%{
    transform:scale(0.5) translate(-$dist-x,$dist-y);
  }
  100%{
    transform:scale(1) translate(0,0);
  }
}
.blob{
  position:absolute;
  background:#e97b7a;
  left:50%;
  top:50%;
  width:200px;
  height:200px;
  line-height:1;
  text-align:center;
  color:white;
  font-size:40px;
  border-radius:100%;
  margin-top:-50px;
  margin-left:-50px;
  animation:blob-left-top-anim cubic-bezier(0.770, 0.000, 0.175, 1.000) 3s infinite;
  &:nth-child(2){
    animation-name:blob-right-top-anim;
  }
  &:nth-child(3){
    animation-name:blob-left-bottom-anim;
    animation-delay: .2s
  }
  &:nth-child(4){
    animation-name:blob-right-bottom-anim;
    animation-delay: .4s
  }
  &:nth-child(5){
    animation:none;
    font-size: 26px;
    position: relative;
    &:before {
      content: 'Content goes here';
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -65%);
    }
  }
}

/* Animation from Css-Tricks
 *  Gooey Effect
 *  https://css-tricks.com/gooey-effect/
 */