CodePen Embed - Pro Cursor Example

<h1>Hover Over Elements to Reveal Cursors</h1>

<div class="cursor" id="cursor-default">
    <!-- Default cursor SVG -->
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
      <path fill="#FFF" stroke="#000" stroke-width="2" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"></path>
    </svg>
  </div>

<!-- div where other cursors render -->
  <div class="cursor" id="cursor-hover"></div>

  <div class="hover-areas">
    <div class="hover-area" data-cursor="close">
      <p>
      Close Cursor
      </p>
    </div>
    <div class="hover-area" data-cursor="move">
      Move Cursor
    </div>
    <div class="hover-area" data-cursor="question">
      Question Mark Cursor
    </div>
    <div class="hover-area" data-cursor="link">
      Link Cursor
    </div>
    <div class="hover-area" data-cursor="notallowed">
      Not Allowed Cursor
    </div>
    <div class="hover-area" data-cursor="add">
      Add Cursor
    </div>
    <div class="hover-area" data-cursor="eyedropper">
      Eyedropper Cursor
    </div>
    <div class="hover-area" data-cursor="expand">
      Expand Cursor
    </div>
    <div class="hover-area" data-cursor="download">
      Download Cursor
    </div>
    <div class="hover-area" data-cursor="eye">
      Eye Cursor
    </div>
    <div class="hover-area" data-cursor="eye-off">
      Eye-off Cursor
    </div>
    <div class="hover-area" data-cursor="fingerprint">
      Fingerprint Cursor
    </div>
  </div>

*{
  cursor: none;
  box-sizing: border-box;
}
body{
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: hidden;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  align-items: center;
  font-family: Verdana, Courier, sans-serif;
  font-size: .9rem;
  background: #FFE5B4;
}
h1{
  width: 100%;
  font-size: 1.2rem;
  text-align: center;
}
svg{
  width: 1.5rem;
  height: 1.5rem;
  transition: all 0.1s ease;
  animation: rotate 1s ease;
}

#cursor-default svg{
  animation: none;
}

@keyframes rotate{
  0%{
    rotate: 0deg;
  }
  100%{
    rotate: 360deg;
  }
}
.cursor {
  
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
  transition: opacity 1s ease;
}

#cursor-hover {
  opacity: 0;
  display: none;
}

.hover-areas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4rem;
  margin-top: 1rem;
}

.hover-area {
  width: 10rem;
  font-size: .7rem;
  height: 10rem;
  background-color: lightblue;
  text-align: center;
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
  &:hover{
    font-size: .9rem;
    font-weight: bold;
  }
}

const cursorDefault = document.querySelector('#cursor-default');
const cursorHover = document.querySelector('#cursor-hover');
const hoverAreas = document.querySelectorAll('.hover-area');

const cursors = {
  close: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
            <path fill="#FFF" stroke="#000" stroke-width="2" d="m16.24 12 3.18-3.18a1.5 1.5 0 0 0 0-2.12L17.3 4.58a1.5 1.5 0 0 0-2.12 0L12 7.76 8.82 4.58a1.5 1.5 0 0 0-2.12 0L4.58 6.7a1.5 1.5 0 0 0 0 2.12L7.76 12l-3.18 3.18a1.5 1.5 0 0 0 0 2.12l2.12 2.12a1.5 1.5 0 0 0 2.12 0L12 16.24l3.18 3.18a1.5 1.5 0 0 0 2.12 0l2.12-2.12a1.5 1.5 0 0 0 0-2.12L16.24 12Z"></path>
          </svg>`,
  move: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
           <path fill="#FFF" stroke="#000" stroke-width="2" stroke-linejoin="round" d="m2 12 3.5-3.5v7L2 12Zm20 0-3.5 3.5v-7L22 12Zm-3.5 0h-13M12 2l3.5 3.5h-7L12 2Zm0 20-3.5-3.5h7L12 22Zm0-3.5v-13"></path>
         </svg>`,
  question: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
               <g fill="#FFF" stroke="#000" stroke-width="2" stroke-linecap="round">
                 <path d="M12 21.5a9.5 9.5 0 1 1 0-19 9.5 9.5 0 0 1 0 19Z"></path>
                 <path d="M12 14c0-1 .32-.98.8-1.11A3 3 0 1 0 9 10"></path>
                 <circle cx="12" cy="17.5" r=".05"></circle>
               </g>
             </svg>`,
  link: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
           <path fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" d="M9.5 7H8c-3.31 0-6 1.69-6 5s2.69 5 6 5h1.5M14.5 17H16c3.31 0 6-1.69 6-5s-2.69-5-6-5h-1.5M7 12h10"></path>
         </svg>`,
  notallowed:
`<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="#000" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z"></path><path fill="#FFF" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 14a6 6 0 0 1-4.88-9.47l8.36 8.36A5.95 5.95 0 0 1 12.01 18Zm4.88-2.53L8.53 7.11a6 6 0 0 1 8.35 8.36Z"></path></svg>`,
  add: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
          <path fill="#FFF" stroke="#000" stroke-width="2" d="M15 9V4.5c0-.83-.67-1.5-1.5-1.5h-3C9.67 3 9 3.67 9 4.5V9H4.5C3.67 9 3 9.67 3 10.5v3c0 .83.67 1.5 1.5 1.5H9v4.5c0 .83.67 1.5 1.5 1.5h3c.83 0 1.5-.67 1.5-1.5V15h4.5c.83 0 1.5-.67 1.5-1.5v-3c0-.83-.67-1.5-1.5-1.5H15Z"></path>
        </svg>`,
  eyedropper: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
                 <g stroke="#000" stroke-width="2" stroke-linejoin="round">
                   <path fill="#FFF" d="m4 16-1 5 5-1 6-6-4-4-6 6z"></path>
                   <path fill="#000" d="M19 5a2.84 2.84 0 0 0-4 0l-3 3-1-1c-.55-.55-1.45-.55-2 0s-.55 1.45 0 2l1 1 4 4 1 1c.55.55 1.45.55 2 0s.55-1.45 0-2l-1-1 3-3c1.1-1.1 1.1-2.9 0-4Z"></path>
                 </g>
               </svg>`,
  expand: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M14 10L21 3M21 3H15M21 3V9M10 14L3 21M3 21H9M3 21L3 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>`,
  download: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M4 16.2422C2.79401 15.435 2 14.0602 2 12.5C2 10.1564 3.79151 8.23129 6.07974 8.01937C6.54781 5.17213 9.02024 3 12 3C14.9798 3 17.4522 5.17213 17.9203 8.01937C20.2085 8.23129 22 10.1564 22 12.5C22 14.0602 21.206 15.435 20 16.2422M8 17L12 21M12 21L16 17M12 21V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>`,
  eye: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M2.42012 12.7132C2.28394 12.4975 2.21584 12.3897 2.17772 12.2234C2.14909 12.0985 2.14909 11.9015 2.17772 11.7766C2.21584 11.6103 2.28394 11.5025 2.42012 11.2868C3.54553 9.50484 6.8954 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7766C21.8517 11.9015 21.8517 12.0985 21.8231 12.2234C21.785 12.3897 21.7169 12.4975 21.5807 12.7132C20.4553 14.4952 17.1054 19 12.0004 19C6.8954 19 3.54553 14.4952 2.42012 12.7132Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12.0004 15C13.6573 15 15.0004 13.6569 15.0004 12C15.0004 10.3431 13.6573 9 12.0004 9C10.3435 9 9.0004 10.3431 9.0004 12C9.0004 13.6569 10.3435 15 12.0004 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>`,
  "eye-off": `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.7429 5.09232C11.1494 5.03223 11.5686 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7767C21.8518 11.9016 21.8517 12.0987 21.8231 12.2236C21.7849 12.3899 21.7164 12.4985 21.5792 12.7156C21.2793 13.1901 20.8222 13.8571 20.2165 14.5805M6.72432 6.71504C4.56225 8.1817 3.09445 10.2194 2.42111 11.2853C2.28428 11.5019 2.21587 11.6102 2.17774 11.7765C2.1491 11.9014 2.14909 12.0984 2.17771 12.2234C2.21583 12.3897 2.28393 12.4975 2.42013 12.7132C3.54554 14.4952 6.89541 19 12.0004 19C14.0588 19 15.8319 18.2676 17.2888 17.2766M3.00042 3L21.0004 21M9.8791 9.87868C9.3362 10.4216 9.00042 11.1716 9.00042 12C9.00042 13.6569 10.3436 15 12.0004 15C12.8288 15 13.5788 14.6642 14.1217 14.1213" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>`,
  fingerprint: `
  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.10008 21.221C6.71021 19.2375 5.89258 16.8243 5.89258 14.2187C5.89258 10.8443 8.6265 8.10938 11.9989 8.10938C15.3712 8.10938 18.1051 10.8443 18.1051 14.2187" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8.10008 21.221C6.71021 19.2375 5.89258 16.8243 5.89258 14.2187C5.89258 10.8443 8.6265 8.10938 11.9989 8.10938C15.3712 8.10938 18.1051 10.8443 18.1051 14.2187" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M18.4359 20.3118C18.3259 20.3179 18.218 20.3281 18.107 20.3281C14.7347 20.3281 12.0007 17.5931 12.0007 14.2188" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M18.4361 20.3118C18.3262 20.3179 18.2182 20.3281 18.1073 20.3281C14.7349 20.3281 12.001 17.5931 12.001 14.2188" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M13.2694 21.9999C10.675 20.382 8.94705 17.5024 8.94705 14.2187C8.94705 12.5315 10.3145 11.164 12.0007 11.164C13.6869 11.164 15.0543 12.5315 15.0543 14.2187C15.0543 15.9059 16.4218 17.2733 18.108 17.2733C19.7942 17.2733 21.1616 15.9059 21.1616 14.2187C21.1616 9.1571 17.0602 5.05469 12.0017 5.05469C6.94319 5.05469 2.8418 9.1571 2.8418 14.2187C2.8418 15.3469 2.96806 16.4455 3.20021 17.5045" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M13.2694 21.9999C10.675 20.382 8.94705 17.5024 8.94705 14.2187C8.94705 12.5315 10.3145 11.164 12.0007 11.164C13.6869 11.164 15.0543 12.5315 15.0543 14.2187C15.0543 15.9059 16.4218 17.2733 18.108 17.2733C19.7942 17.2733 21.1616 15.9059 21.1616 14.2187C21.1616 9.1571 17.0602 5.05469 12.0017 5.05469C6.94319 5.05469 2.8418 9.1571 2.8418 14.2187C2.8418 15.3469 2.96806 16.4455 3.20021 17.5045" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M20.5257 5.86313C18.4435 3.4978 15.399 2 12.0002 2C8.60136 2 5.55687 3.4978 3.47461 5.86313" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M20.5257 5.86313C18.4435 3.4978 15.399 2 12.0002 2C8.60136 2 5.55687 3.4978 3.47461 5.86313" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`
  
};

document.addEventListener('mousemove', (e) => {
  cursorDefault.style.left = `${e.pageX-10}px`;
  cursorDefault.style.top = `${e.pageY-5}px`;
  cursorHover.style.left = `${e.pageX-10}px`;
  cursorHover.style.top = `${e.pageY-5}px`;
});

hoverAreas.forEach(area => {
  area.addEventListener('mouseenter', () => {
    const cursorType = area.dataset.cursor;
    cursorHover.innerHTML = cursors[cursorType];
    cursorDefault.style.opacity = '0';
    cursorHover.style.display = 'block';
    setTimeout(() => {
      cursorHover.style.opacity = '1';
    }, 5)
  });

  area.addEventListener('mouseleave', () => {
    cursorHover.style.opacity = '0';
    cursorDefault.style.opacity = '1';
    cursorHover.style.display = 'none';
  });
});

This Pen is owned by Fafowora Sunkanmi on CodePen.

See more by @sunkanmii-the-styleful on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.