script.js

(function() {
    var svgElement = document.querySelector('svg');
    var maskedElement = document.querySelector('#mask-circle');
    var circleFeedback = document.querySelector('#circle-shadow');
    var svgPoint = svgElement.createSVGPoint();

    function cursorPoint(e, svg) {
        svgPoint.x = e.clientX;
        svgPoint.y = e.clientY;
        return svgPoint.matrixTransform(svg.getScreenCTM().inverse());
    }

    function update(svgCoords) {
        maskedElement.setAttribute('cx', svgCoords.x);
        maskedElement.setAttribute('cy', svgCoords.y);
        circleFeedback.setAttribute('cx', svgCoords.x);
        circleFeedback.setAttribute('cy', svgCoords.y);
    }

    window.addEventListener('mousemove', function(e) {
        update(cursorPoint(e, svgElement));
    }, false);

    document.addEventListener('touchmove', function(e) {
        e.preventDefault();
        var touch = e.targetTouches[0];
        if (touch) update(cursorPoint(touch, svgElement));
    }, false);
})();