Dynamically Create Custom Cursors Using JavaScript Library

CursorJS is a very small JavaScript library for creating custom cursors rendered using SVG.

javascript change cursor to image, custom cursor css, custom cursor js library, mouse effect javascript, custom cursor html code

JQuery & GSAP Fancy Pointer Animations | Cursor & Magnetic

How to make use of it:

1. Import the CursorJS JavaScript library into your web project.

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

2. 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
});

Create Custom Cursors Using JavaScript, CursorJS Plugin/Github