JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="stalker">
    <canvas id="canvas" width="1600" height="433"></canvas>
</div>

CSS

#container{
}

.stalker {
    background-color: #6fc39a;
    height:200px;
    border-top-color: rgba(168, 228, 165, 0.7);
    border-bottom-color: rgba(53, 162, 142, 0.3);
}

JavaScript

var stalker = $('.stalker');

var canvas = $('#canvas')[0];

var ctx = canvas.getContext('2d'), gradient, initialized = false;

$("#container").mousemove(function(e){
    setTimeout(function(){

                initialized = true;

                canvas.width  = stalker.width();
                canvas.height = stalker.height();

                gradient = ctx.createRadialGradient(e.pageX, e.pageY, 0, e.pageX, e.pageY, canvas.width);
                gradient.addColorStop(0, stalker.css('border-top-color'));
                gradient.addColorStop(1, stalker.css('border-bottom-color'));
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, canvas.width, canvas.height);

            }, initialized ? 200 : 0);

 
});