Gooey CSS Effect

by kthornbloom

HTML

<div class="wrap">
  <div class="blob">
  
  </div>
  
  <div class="blob2">
  
  </div>
  
  <div class="sharpener">
  
  </div>
  <div class="sharpener2">
  
  </div>
</div>

CSS

body, html {
  background: linear-gradient( 45deg, #3b3bf8, #af2727);
  max-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.wrap {
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: color-dodge;
  filter: blur(5px) contrast(20);
  overflow: hidden;
}

@keyframes spin {
  0% {transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}

@keyframes hover {
  0% {transform: translate(0, 0)}
  20% {transform: translate(2px, 4px)}
  40% {transform: translate(-2px, 3px)}
  80% {transform: translate(3px, -2px)}
  100% {transform: translate(0, 0)}
}

.blob {
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 50%;
  filter: blur(20px);
  animation: hover 6s infinite linear;
}

.blob2 {
  height: 60px;
  width: 60px;
  background: #fff;
  border-radius: 50%;
  filter: blur(20px);
  position: absolute;
  transform: translate(-30px, -30px);
}

JavaScript

var angle = document.getElementById("angle");


const line = document.getElementById('line');

var difference = function (a, b) { return Math.abs(a - b); }
const blob2 = document.querySelector('.blob2');

document.addEventListener("mousemove", function(e) {
if(event.buttons == 1) {
  var p1 = {
    x: e.pageX,
    y: e.pageY
  };
  var p2 = {
    x: window.innerWidth / 2,
    y: window.innerHeight / 2
  };
  blob2.style.left = p1.x+'px';
  blob2.style.top = p1.y+'px';
  }
})

document.addEventListener("mouseup", function(e) {
	var p2 = {
    x: window.innerWidth / 2,
    y: window.innerHeight / 2
  };
	line.style.width = '0px';
  blob2.style.top = p2.y+'px';
  blob2.style.left = p2.x+'px';
})