How to Make a Custom Mouse Cursor in Editor X 

<script>
    function createCustomCursor() {
        let cursor = document.getElementById('myCustomCursor');

        if (cursor) {
            console.log('myCustomCursor already exist');
            //addCursorSpecialEffectToAllPageLinks(cursor);
        } else {
            cursor = document.createElement("div");
            cursor.setAttribute("id", "myCustomCursor");
            document.body.appendChild(cursor);

            initCustomCursor(cursor);
            //addCursorSpecialEffectToAllPageLinks(cursor);
        }
    }

    function initCustomCursor(cursor) {
        document.body.onmousemove = function(e) {
            cursor.style.setProperty('--x', (e.clientX) + 'px');
            cursor.style.setProperty('--y', (e.clientY) + 'px');
        }
    }

    function addCursorSpecialEffectToAllPageLinks(cursor) {
        var links = document.querySelectorAll("a");

        // This for loop is used to find all the page links and add the "myCursorHoverState" css class to create special effect on hover
        for (var i = 0; i < links.length; i++) {
            var link = links[i].getAttribute("href");
            console.log(link);

            links[i].addEventListener("mouseenter", function(event) {
                console.log('In');
                cursor.classList.add("myCursorHoverState");
            }, false);

            links[i].addEventListener("mouseleave", function(event) {
                console.log('Out');
                cursor.classList.remove("myCursorHoverState");
            }, false);
        }
    }

if (window.innerWidth > 1024) {   
        createCustomCursor();
} else {
console.log('Screen size is smaller then 1024px width')
}

</script>