Custom Cursor

by Dhruvang Gajjar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="container">
  <img src="https://dummyimage.com/200x200/ccc/fff" />
  <img src="https://dummyimage.com/200x200/ccc/fff" />
  <img src="https://dummyimage.com/200x200/ccc/fff" />
  <img src="https://dummyimage.com/200x200/ccc/fff" />
  <img src="https://dummyimage.com/200x200/ccc/fff" />
  <img src="https://dummyimage.com/200x200/ccc/fff" />
</div>


<svg class="drag-cursor" width="108px" height="70px" viewBox="0 0 108 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="transform: translate(1057px, 366.156px);">
  <defs>
    <filter id="shadow" height="145.7%" width="131.5%" x="-15.7%" y="-22.9%">
      <feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2.5"></feGaussianBlur>
      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" type="matrix" values="0 0 0 0 0.141176471   0 0 0 0 0.196078431   0 0 0 0 0.258823529  0 0 0 0.2 0"></feColorMatrix>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
    <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientTransform="translate(0.500000,0.500000),rotate(90.000000),scale(1.000000,0.994633),translate(-0.500000,-0.500000)" id="radialGradient-2">
      <stop stop-color="#FFFFFF" stop-opacity="0.118526005" offset="0%"></stop>
      <stop stop-color="#FFFFFF" stop-opacity="0.155375874" offset="100%"></stop>
    </radialGradient>
  </defs>
  <g id="default-cursor" filter="url(#shadow)" fill="none" fill-rule="evenodd" stroke="#FFFFFF">
    <circle class="circle-outer" fill="url(#radialGradient-2)" stroke-width="1px"...

CSS

.drag-cursor {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: opacity .15s ease-in-out;
  transform-origin: center;
  overflow: visible !important;
}

.drag-cursor.-active {
  opacity: 1;
}