<div class="svg">
  <div class="circle"></div>
  <div class="circle"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="gooey">
      <feGaussianBlur in="SourceGraphic" stdDeviation="12" 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 70 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop" />
    </filter>
  </defs>
</svg>

.svg {
  position: absolute;
  width: 400px;
  height: 300px;
  left: calc(50% - 200px);
  top: calc(50% - 150px);  
  margin: auto;
  filter: url(#gooey);
}

.circle {
  background: #60cb60;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 100%;
  &:last-child {
    width: 50px;
    height: 50px;
    animation: circle-right ease-in-out 2s infinite alternate;
  }
}

@keyframes circle-right{
  0% {
    transform: translate(-10px, -60px);
  }
  40% {
    transform: translate(57px, 120px);
  }
  60% {
    transform: translate(-20px, 120px);
  }
  100% {
    transform: translate(57px, -60px);
  }
}