Crear un cursor con efecto blend mode

<div class="custom-cursor"></div>

document.addEventListener("DOMContentLoaded", function(event) {


  var cursor = document.querySelector(".custom-cursor");
  var links = document.querySelectorAll("a");
  var initCursor = false;


  for (var i = 0; i < links.length; i++) {
    var selfLink = links[i];


    selfLink.addEventListener("mouseover", function() {
      cursor.classList.add("custom-cursor--link");
    });
    selfLink.addEventListener("mouseout", function() {
      cursor.classList.remove("custom-cursor--link");
    });
  }


  window.onmousemove = function(e) {
    var mouseX = e.clientX;
    var mouseY = e.clientY;


    if (!initCursor) {
      // cursor.style.opacity = 1;
      TweenLite.to(cursor, 0.3, {
        opacity: 1
      });
      initCursor = true;
    }


    TweenLite.to(cursor, 0, {
      top: mouseY + "px",
      left: mouseX + "px"
    });
  };


  window.onmouseout = function(e) {
    TweenLite.to(cursor, 0.3, {
      opacity: 0
    });
    initCursor = false;
  };
});

* {
  cursor: none;
}
.web-header-banner>div {
	min-height: auto;
}
.custom-cursor {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  transition: transform 350ms ease;
  transform: translate(-50%, -50%) scale(.3);
  z-index: 9000;
}
.custom-cursor--link {
  transform: translate(-50%, -50%) scale(1);
}

* {
  cursor: auto;
}
.web-header-banner>div {
display:none;
}
.custom-cursor {
display:none;
}