Simple Radial Mouse Cursor

index.html

<h2>
    Simple Radial Mouse Cursor
    <br><small>25 lines of JavaScript</small>
</h2>

<div id="mouse-circle"></div>

script.js

if (window.matchMedia("(min-width: 768px)").matches) {
    let mousePosX = 0,
        mousePosY = 0,
        mouseCircle = document.getElementById("mouse-circle");

    document.onmousemove = (e) => {
        mousePosX = e.pageX;
        mousePosY = e.pageY;
    };

    let delay = 6,
        revisedMousePosX = 0,
        revisedMousePosY = 0;

    function delayMouseFollow() {
        requestAnimationFrame(delayMouseFollow);

        revisedMousePosX += (mousePosX - revisedMousePosX) / delay;
        revisedMousePosY += (mousePosY - revisedMousePosY) / delay;

        mouseCircle.style.top = revisedMousePosY + "px";
        mouseCircle.style.left = revisedMousePosX + "px";
    }
    delayMouseFollow();
}

simple-radial-mouse-cursor.markdown

Simple Radial Mouse Cursor

A Pen by Ciprian on CodePen.

License.

style.css

/**
 * Demo styles only
 */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
h2 {
    font-family: "Google Sans";
    font-weight: 500;
    text-align: center;
}
h2 small {
    font-weight: 300;
}
/**
 * End demo styles
 */

/**
 * Simple Radial Mouse Cursor
 */
#mouse-circle {
    position: absolute;
    width: 64px;
    height: 64px;
    margin: -32px 0px 0px -32px;
    border: 1px solid #000000;
    border-radius: 50%;
    pointer-events: none !important;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0);
}

styles

<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@100;200;300;400;500;700;900&amp;display=swap" rel="stylesheet" />