Custom SVG cursor

Pure js custom cursor SVG

by Oleh Kotsubko

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nostrum itaque veritatis aliquam, inventore in fuga unde ex, minus provident eum voluptate commodi facilis officia architecto sint? Ea, iure, dolore.</p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus earum quae quo consequatur tempora doloribus delectus veniam velit tempore nesciunt dolores error libero, adipisci aliquam, omnis, quisquam maxime sapiente nemo.<a href="#">link</a></span>
<span>Repellat odio fugit cupiditate. Eos harum assumenda ipsa, accusantium ipsam et nihil dicta est voluptate sapiente cupiditate facere aspernatur excepturi sequi corrupti officiis deleniti temporibus incidunt autem ut culpa, commodi?</span>
<span>Alias voluptatibus nostrum magnam voluptate facilis, veniam dicta voluptates esse quisquam repellat nesciunt facere maxime consequatur amet tenetur sunt deleniti saepe possimus, quas velit accusantium excepturi ut! Quibusdam, delectus quos.</span>
<span>Temporibus eum cupiditate fuga ab, accusamus laboriosam repudiandae dolore earum expedita et iure nisi ratione facere perspiciatis, accusantium, alias consequatur eos non? Deleniti ad, quo quae consequuntur laudantium vitae ullam <a href="#">link</a></span>
<span>Nostrum minus magnam quam, non error pariatur incidunt, qui ad facilis, voluptatem blanditiis. Optio corporis quibusdam, id nam pariatur adipisci. Labore tempore animi, ipsam architecto dolorum provident, incidunt omnis necessitatibus?</span>
<span>Libero suscipit nulla, numquam praesentium laboriosam consectetur possimus cumque et perferendis. Ducimus, accusamus magni, dolor, hic, tempore numquam sapiente pariatur repellat nulla quos illum reiciendis dicta quae at repellendus? Culpa?</span>
<span>Impedit incidunt iure quidem hic minus animi maiores unde, voluptas ipsa atque repellat qui a modi eum explicabo magnam. Alias iusto omnis quos sunt cumque et obcaecati nihil, dolorum dolores.</span></p>
<p>Lorem ipsum dolor sit amet,...

JavaScript

const str = `<svg xmlns="http://www.w3.org/2000/svg" width="280" height="278" viewBox="0 0 140 139" id="cursor">
  <rect fill="#18fe00" x="68.031" width="3.938" height="139"/>
  <rect fill="#18fe00" x="0.5" y="67.5" width="139" height="4"/>
</svg>`;

document.body.insertAdjacentHTML( 'beforeend', str );
const CURSOR = document.getElementById('cursor');
CURSOR.style.position = 'fixed';
CURSOR.style.zIndex = '99999';
CURSOR.style.pointerEvents = 'none';
document.body.style.cursor = 'none';
const LINKS = document.querySelectorAll('a')

LINKS.forEach(item => {
	item.addEventListener('mouseover', function() {
  	document.body.cursor = 'auto';
    CURSOR.querySelectorAll('rect').forEach(item => item.style.fill = 'red')
  })
  item.addEventListener('mouseout', function() {
  	document.body.cursor = 'none';
  	CURSOR.querySelectorAll('rect').forEach(item => item.style.fill = '#18fe00')
  })
})

document.addEventListener("mousemove", function( event ) {  
  CURSOR.style.left = event.clientX - (CURSOR.clientWidth/2)
  CURSOR.style.top = event.clientY - (CURSOR.clientWidth/2)
})