How to add an additional cursor to any website

This is useful if, for some reason, you cannot see (or record) your actual cursor. Drag the following link into your browser’s bookmark bar. Then click on this new bookmark every time you need to add a cursor to a website.

Add cursor

You can also test it right here by clicking on the link.

The following is the code that will be run:

const existing = document.getElementById('thecursor'),
    cursor = document.createElement('img');
cursor.id = 'thecursor';
cursor.src = 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDggNDgiPg0KICAgIDxwYXRoIGZpbGw9IiNFMEUwRTAiIGQ9Ik0yNy44LDM5LjdjLTAuMSwwLTAuMiwwLTAuNC0wLjFjLTAuMi0wLjEtMC40LTAuMy0wLjYtMC41bC0zLjctOC42bC00LjUsNC4yQzE4LjUsMzQuOSwxOC4zLDM1LDE4LDM1IGMtMC4xLDAtMC4zLDAtMC40LTAuMUMxNy4zLDM0LjgsMTcsMzQuNCwxNywzNGwwLTIyYzAtMC40LDAuMi0wLjgsMC42LTAuOUMxNy43LDExLDE3LjksMTEsMTgsMTFjMC4yLDAsMC41LDAuMSwwLjcsMC4zbDE2LDE1IGMwLjMsMC4zLDAuNCwwLjcsMC4zLDEuMWMtMC4xLDAuNC0wLjUsMC42LTAuOSwwLjdsLTYuMywwLjZsMy45LDguNWMwLjEsMC4yLDAuMSwwLjUsMCwwLjhjLTAuMSwwLjItMC4zLDAuNS0wLjUsMC42bC0yLjksMS4zIEMyOC4xLDM5LjcsMjcuOSwzOS43LDI3LjgsMzkuN3oiLz4NCiAgICA8cGF0aCBmaWxsPSIjMjEyMTIxIiBkPSJNMTgsMTJsMTYsMTVsLTcuNywwLjdsNC41LDkuOGwtMi45LDEuM2wtNC4zLTkuOUwxOCwzNEwxOCwxMiBNMTgsMTBjLTAuMywwLTAuNSwwLjEtMC44LDAuMiBjLTAuNywwLjMtMS4yLDEtMS4yLDEuOGwwLDIyYzAsMC44LDAuNSwxLjUsMS4yLDEuOEMxNy41LDM2LDE3LjgsMzYsMTgsMzZjMC41LDAsMS0wLjIsMS40LTAuNWwzLjQtMy4ybDMuMSw3LjMgYzAuMiwwLjUsMC42LDAuOSwxLjEsMS4xYzAuMiwwLjEsMC41LDAuMSwwLjcsMC4xYzAuMywwLDAuNS0wLjEsMC44LTAuMmwyLjktMS4zYzAuNS0wLjIsMC45LTAuNiwxLjEtMS4xYzAuMi0wLjUsMC4yLTEuMSwwLTEuNSBsLTMuMy03LjJsNC45LTAuNGMwLjgtMC4xLDEuNS0wLjYsMS43LTEuM2MwLjMtMC43LDAuMS0xLjYtMC41LTIuMWwtMTYtMTVDMTksMTAuMiwxOC41LDEwLDE4LDEwTDE4LDEweiIvPg0KPC9zdmc+';
cursor.style = 'position:fixed;width:30px;height:30px;z-index:9999;pointer-events:none;';
if(existing)
    document.body.removeChild(existing);
document.body.appendChild(cursor);
document.documentElement.addEventListener('mousemove',evt => {
    cursor.style.left = (evt.clientX - 10) + 'px';
    cursor.style.top = (evt.clientY - 6) + 'px';
});

The cursor will just be a simple diagonal arrow. It will not change over links, input fields, etc.