Create Custom Cursors Using JavaScript – CursorJS

Preview:

Description:

CursorJS  is a super tiny JavaScript library for creating custom cursors rendered with SVG.

How to use it:

Import the CursorJS JavaScript library into your web project.

<script src="cursor.min.js"></script>

Replace the default cursor icon with your own image:

<div style="display:none;">
  <svg id="svg" width="14px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 20">
    <polygon points="2,9 2,2 8,6" style="fill:#ffffff;stroke:#161616;stroke-width:1;"/>
    <circle cx="9" cy="15" r="3" style="fill:#ffffff;stroke:#161616;stroke-width:1;"/>
  </svg>
</div>

<script>
cursor({
  domElement:document.body,
  type:"svg",
  svgElement:document.getElementById("svg")
});
</script>

// or
cursor({
  domElement:document.body,
  type:"svg",
  filePath:"type/cursor.svg"
});

// or
cursor_svg_string='<svg id="svg" width="14px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 20">'+
'<polygon points="2,9 2,2 8,6" style="fill:#ffffff;stroke:#161616;stroke-width:1;"/>'+
'<circle cx="9" cy="15" r="3" style="fill:#ffffff;stroke:#161616;stroke-width:1;"/>'+
'</svg>';
cursor({
  domElement:document.body,
  type:"svg",
  svgString:cursor_svg_string
});