JSFiddle - React, Tailwind, and code Playground

HTML

<div id="der"></div>
<div id="light" class="light"></div>

CSS

div {
    background: brown;
    bottom: 0;
    height: 100px;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    box-shadow: 0px 0px 0px #888888;
    border-radius: 50px;
}
.light {
    background: yellow;
    margin: 0;
    width: 20px;
    height: 20px;
    border-radius: 10px;
}
* {
    cursor: none;
}

JavaScript

function getsupportedprop(proparray) {
    var root = document.documentElement;
    for (var i = 0; i < proparray.length; i++) {
        if (proparray[i] in root.style) {
            return proparray[i];
        }
    }
}

var boxshadowprop = getsupportedprop(['boxShadow', 'MozBoxShadow', 'WebkitBoxShadow']);
var der = document.getElementById("der");
var light = document.getElementById("light");

var cX = der.offsetLeft + der.offsetWidth / 2;
var cY = der.offsetTop + der.offsetHeight / 2;
var maxD = Math.sqrt(cX * cX + cY * cY);

document.onmousemove = getMousePosition;

function getMousePosition(mp) {
    var _x;
    var _y;
    _x = event.clientX + document.documentElement.scrollLeft;
    _y = event.clientY + document.documentElement.scrollTop;

    light.style.left = _x - light.offsetWidth / 2 + "px";
    light.style.top = _y - light.offsetHeight / 2 + "px";

    var dX = cX - _x;
    var dY = cY - _y;
    var d = Math.sqrt(dX * dX + dY * dY) / maxD * 100 + 10;
    var l = dX;
    var t = dY;
    var shadow = l + "px " + t + "px " + d + "px #888888";
    der.style[boxshadowprop] = shadow;
}