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="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" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop" />
    </filter>
  </defs>
</svg>

scss

.blobs {
  filter: url(#goo);
  width: 400px;
  height: 200px;
  position: relative;
}

.blob {
  background: black;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 50%;
}

@keyframes blob-anim-left {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-80px);
  }
}

.blob:first-child {
  animation: blob-anim-left ease-in-out 0.8s infinite alternate;
}

@keyframes blob-anim-right {
  0% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(55px);
    transform: translateX(80px);
  }
}

.blob:last-child {
  animation: blob-anim-right ease-in-out 0.8s infinite alternate;
}