JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
    <defs>
        <mask id="cursorMask" maskUnits="objectBoundingBox" maskContentUtils="objectBoundingBox">
            <g>
                <!-- the SECOND rect element is what determines the transparent area -->
                <rect x="0" y="0" width="20" height="166" fill="#FFFFFF" />
                <rect x="0" y="0" width="100" height="100" fill="#000000" />
            </g>
        </mask>
    </defs>
    <image width="20" height="6" xlink:href="https://upload.wikimedia.org/wikipedia/commons/d/d4/Firefox-33-xfce.png" />
</svg>

CSS

svg {
    width: 20px;
    height: 6px;
}
body {
    background-color: red;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Mozilla_Firefox_logo_2013.svg/226px-Mozilla_Firefox_logo_2013.svg.png");
}
image:hover {
    mask: url("#cursorMask");
}

JavaScript

var img = document.getElementsByTagName("image")[0];
var imgPos = img.getBoundingClientRect();
var imgX = imgPos.left;
var imgY = imgPos.top;
var rect = document.getElementsByTagName("rect")[1];
var rectHalfWidth = rect.getAttribute("width") / 2;
var rectHalfHeight = rect.getAttribute("height") / 2;
img.addEventListener("mousemove", function (e) {
    rect.setAttribute("x", e.clientX - imgX - rectHalfWidth);
    rect.setAttribute("y", e.clientY - imgY - rectHalfHeight);
}, false);