HunterD

div class="cursor">
    <div class="cursor__ball cursor__ball--big ">
        <svg height="30" width="30">
            <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
        </svg>
    </div>

    <div class="cursor__ball cursor__ball--small">
        <svg height="10" width="10">
            <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
        </svg>
    </div>
</div>

<style>
    body .cursor {
        pointer-events: none;
    }

    body .cursor__ball {
        position: fixed;
        top: 0;
        left: 0;
        mix-blend-mode: difference;
        z-index: 1000;
    }

    body .cursor__ball circle {
        fill: #f7f8fa;
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

<script>
    const $bigBall = document.querySelector('.cursor__ball--big');
    const $smallBall = document.querySelector('.cursor__ball--small');
    const $hoverables = document.querySelectorAll('a');

    // Listeners
    document.body.addEventListener('mousemove', onMouseMove);
    for (let i = 0; i < $hoverables.length; i++) {
        if (window.CP.shouldStopExecution(0)) break;
        $hoverables[i].addEventListener('mouseenter', onMouseHover);
        $hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
    }

    // Move the cursor
    window.CP.exitedLoop(0); function onMouseMove(e) {
        TweenMax.to($bigBall, .4, {
            x: e.clientX - 15,
            y: e.clientY - 15
        });

        TweenMax.to($smallBall, .1, {
            x: e.clientX - 5,
            y: e.clientY - 7
        });
    }

    // Hover an element
    function onMouseHover() {
        TweenMax.to($bigBall, .3, {
            scale: 4
        });
    }
    function onMouseHoverOut() {
        TweenMax.to($bigBall, .3, {
            scale: 1
        });
    }
</script>