JSFiddle - React, Tailwind, and code Playground

by Oleh Kotsubko

HTML

<div class="top">
  <div class="ball"></div>
</div>
<div class="wrapper">
  <div class="ball ball-one"></div>
  <div class="ball ball-two"></div>
  <div class="ball ball-three"></div>
  <div class="ball ball-animate"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
      <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
    </filter>
    <filter id="goo-no-comp">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
    </filter>
  </defs>
</svg>

SCSS

.wrapper {
  overflow: hidden;
  position: relative;
  display: inline-block;
  filter: url(#goo);
  
  
  
  &.animate {
    
    .ball-animate {
      -webkit-animation: fly 6s infinite alternate;
      -o-animation: fly 6s infinite alternate;
      animation: fly 6s infinite alternate;
    }
  }
}

.ball {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  border-radius: 50%;
  display: inline-block;
  margin-right: 33px;
  position: relative;
  overflow: hidden;
  
  &-animate {
    position: absolute;
    right: 0;
    width: 50px;
    height: 20px;
    border-radius: 50%;
    top: 15px;
    transition: 1s cubic-bezier(.91,-0.3,.19,1.23);
  }
  
  
}

@keyframes fly {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(-190px);
  }
}

.top {
  text-align: center;
  padding-bottom: 30px;
  max-width: 255px
}

JavaScript

$('.wrapper').on('click', function(){
	$(this).toggleClass('animate');
});