<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
</div>

<svg>
  <filter id="goo">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    <feColorMatrix values="
                           1 0 0 0 0
                           0 1 0 0 0
                           0 0 1 0 0
                           0 0 0 20 -10
                           " />
  </filter>
</svg>

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  filter: url(#goo);
  overflow: hidden;
}

.item1,
.item2 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}

.item1 {
  background: red;
}

.item2 {
  background: blue;
}

svg {
  width: 0;
  height: 0;
}

.item1 {
  animation: goo1 1s linear infinite;
}
.item2 {
  animation: goo2 1s linear infinite;
}

@keyframes goo1 {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(50px);
  }
}

@keyframes goo2 {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-50px);
  }
}