JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

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

CSS

@-webkit-keyframes move {
    from {left: 10px;}
    to {left: 100px;}
}

body {
    margin: 0;
    background: black;
    -webkit-filter: url("#goo");
}

div {
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
}

div:first-child {
    top: 10px;
    left: 10px;
}
div:nth-child(2) {
    top: 10px;
    left: 50px;
    -webkit-animation: move 1s alternate infinite;
}