SVG Gooey Effect

HTML

<div class="blobs">
  <div class="blob"></div>
  <div class="blob"></div>
</div>

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

SCSS

.blobs{
  font-size: 0px;
  margin: 50px;
  padding: 20px;
  filter: url('#curved');
  
  .blob{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #000;
    display: inline-block;
    
    
    &:first-child{
      animation: anim-left 2600ms ease-in-out infinite alternate;
      animation-delay: -400ms;
    }
    
    &:last-child{
      background-color: #f00;
      animation: anim-right 4600ms ease-in-out infinite alternate; 
      animation-delay: -400ms;
    }
  }
}

@keyframes anim-left{
  0%{
     transform: translateX(-25px) 
  }
  
  100%{
    transform: translateX(50px) 
  }
}

@keyframes anim-right{
  0%{
     transform: translateX(25px) 
  }
  
  100%{
    transform: translateX(-50px) 
  }
}