<div id="container" class="container">
  <div class="menu">
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div id="cursor" class="cursor"></div>
  </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>

.container {
  width: 100%;
  max-width: 900px;
  height: 90vh;
  position: relative;
  margin: auto;
  overflow: hidden;
}

.cursor {
  width: 150px;
  height: 150px;
  background: red;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  transition: 0.15s;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  filter: url(#goo);
}

.items {
  width: 25vw;
  height: 25vw;
  background: red;
  margin-left: 2vw;
  margin-top: 1.4vw;
  border-radius: 50%;
}

svg {
  width: 0;
  height: 0;
}

container.addEventListener("mousemove", function (e) {
  e = window.event;

  cursor.style.left = e.pageX - 75 + "px";
  cursor.style.top = e.pageY - 75 + "px";
});