Ghost cursor

ghost-cursor.js

(function () {
  if (!window._shadowCursor) {
    window._shadowCursor = document.createElement("img");
    document.body.appendChild(window._shadowCursor);

    window._shadowCursor.style = `
      height: 32px;
      width: 32px;
      position: fixed;
      z-index: 99999999;
    `;
    window._shadowCursor.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI4IDI4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyOCAyOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+Cjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOC4yLDIwLjkgOC4yLDQuOSAxOS44LDE2LjUgMTMsMTYuNSAxMi42LDE2LjYgIi8+Cjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMTcuMywyMS42IDEzLjcsMjMuMSA5LDEyIDEyLjcsMTAuNSAiLz4KPHJlY3QgeD0iMTIuNSIgeT0iMTMuNiIgdHJhbnNmb3JtPSJtYXRyaXgoMC45MjIxIC0wLjM4NzEgMC4zODcxIDAuOTIyMSAtNS43NjA1IDYuNTkwOSkiIHdpZHRoPSIyIiBoZWlnaHQ9IjgiLz4KPHBvbHlnb24gcG9pbnRzPSI5LjIsNy4zIDkuMiwxOC41IDEyLjIsMTUuNiAxMi42LDE1LjUgMTcuNCwxNS41ICIvPgo8L3N2Zz4=';
    window.addEventListener('mousemove', function (e) {
      window._shadowCursor.style.left = `${e.clientX - 8}px`;
      window._shadowCursor.style.top = `${e.clientY - 8}px`;
    });
  }
})();