Animated Blob Cursor

animated-blob-cursor.markdown

Animated Blob Cursor

A Pen by Ceren Şahin on CodePen.

License.

index.html

<script>
  document.addEventListener('DOMContentLoaded', () => {
    new window['Cursor']({
      targets: ['a']
    })
  })
</script>

<nav>
  <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Projects</a>
    <a href="#">Contact</a>
</nav>

script.js

// Uses https://github.com/markmead/custom-cursor

style.scss

@import url("https://fonts.googleapis.com/css?family=Montserrat:900");

[data-cursor] {
  width: 50px;
  height: 50px;
  background: linear-gradient(
    120deg,
    #ff1744,
    #e040fb,
    #2979ff,
    #00e5ff,
    #76ff03
  );
  background-size: 1600% 1600%;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 50;
  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%;
  }
}

.cursor-hover--a [data-cursor] {
  width: 100px;
  height: 100px;
}

body {
  display: grid;
  place-content: center;
  height: 100vh;
  background: #000;
  font-family: "Montserrat", sans-serif;

  nav {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  a {
    color: #fff;
    cursor: pointer;
    font-size: 2rem;
    transition: 0.25s ease;
    text-decoration: none;

    &:hover {
      transform: translateX(5px);
    }
  }
}