#cursorBlob
.wrap
  ul.nav
    each link in ['About Us', 'Why Us', 'Contact Us']
      li.nav__link= link
View Compiled
@import url("https://fonts.googleapis.com/css?family=Montserrat:900");
#cursorBlob {
  width: 50px;
  height: 50px;
  background: linear-gradient(
    120deg,
    #FF1744,
    #E040FB,
    #2979FF,
    #00E5FF,
    #76FF03
  );
  background-size: 1600% 1600%;
  position: absolute;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 1;
  transition: 0.15s linear;
  animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite;
}
@keyframes blobRadius {
  0%, 100% { border-radius: 43% 77% 80% 40% / 40% 40% 80% 80%; }
	20% { border-radius: 47% 73% 61% 59% / 47% 75% 45% 73%; }
	40% { border-radius: 46% 74% 74% 46% / 74% 58% 62% 46%; }
	60% { border-radius: 47% 73% 61% 59% / 40% 40% 80% 80%; }
	80% { border-radius: 50% 70% 52% 68% / 51% 61% 59% 69%; }
}
@keyframes blobBackground {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: #212121;
}
.nav {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  &__link {
    color: #fff;
    list-style: none;
    cursor: pointer;
    font-size: 10vw;
    font-family: "Montserrat", sans-serif;
    transition: 0.25s ease;
    &:not(:last-child) {
      margin-bottom: 50px;
    }
    &:hover {
      transform: translateX(25px);
    }
  }
}
View Compiled
const blobCursor = (() => {  
  const CURSOR = document.querySelector('#cursorBlob');
  const LINKS = document.querySelectorAll('.nav__link');
  const setCursorPos = (e) => {
    const { pageX: posX, pageY: posY } = e;
    CURSOR.style.top = `${posY - (CURSOR.offsetHeight / 2)}px`;
    CURSOR.style.left = `${posX - (CURSOR.offsetWidth / 2)}px`;
  };
  document.addEventListener('mousemove', setCursorPos);
  
  const setCursorHover = () => CURSOR.style.transform = 'scale(2.5)';
  const removeCursorHover = () => CURSOR.style.transform = '';
  LINKS.forEach(link => link.addEventListener('mouseover', setCursorHover));
  LINKS.forEach(link => link.addEventListener('mouseleave', removeCursorHover));
  
})();  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.