JSFiddle - React, Tailwind, and code Playground

by Lucas Krause

HTML

<div class="a"></div>
<div class="b"></div>

CSS

.a {
    -webkit-mask-repeat:no-repeat;
       -moz-mask-repeat:no-repeat;
        -ms-mask-repeat:no-repeat;
         -o-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
    
    position:fixed;
    width:100%;
    height:100%;
    background-color:#000;
    top:0;
    left:0;
}
.b {
    width:50px;
    height:50px;
    background-color:red;
    margin-top:200px;
    margin-left:200px;
}

JavaScript

var int_radius = 50,
    arr_prefixes = [
        "webkit",
        "ms",
        "moz",
        "o"
    ];

$(document).bind("mousemove", function(e, arr_pos){
    if(typeof arr_pos!="undefined"){
        e.pageX=arr_pos[0];
        e.pageY=arr_pos[1];
    }
    $(".a").css((function(){
        var map_a = {
            "mask-image": "radial-gradient(" + e.pageX + "px " + e.pageY + "px, circle cover, transparent " + (int_radius - 1) + "px, #000 " + int_radius + "px)"
        };

        $.each(arr_prefixes, function(i, val) {
            map_a["-" + val + "-mask-image"] = "-" + val + "-radial-gradient(" + e.pageX + "px " + e.pageY + "px, circle cover, transparent " + (int_radius - 1) + "px, #000 " + int_radius + "px)";
        });

        return map_a;
    })());
}).triggerHandler("mousemove", [[$(document).width()/2, $(document).height()/2]]);