JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="976" height="549" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<radialGradient id="lightsource">
			<stop offset="0%" stop-color="black" />
			<stop offset="50%" stop-color="black" />
			<stop offset="100%" stop-color="white" />
		</radialGradient>
		<mask id="mask1" x="0" y="0" width="976" height="549">
		<rect x="0" y="0" width="976" height="549" fill="white" />
		<ellipse ry="60" rx="64" id="svg_1" cy="122.5" cx="101.5" stroke-width="none" fill="url(#lightsource)"/>
		<ellipse ry="60" rx="64" id="svg_2" cy="175.5" cx="216" stroke-width="none" fill="url(#lightsource)"/>
		</mask>
	</defs>
    <g>
        <rect x="0" y="0" width="976" height="549" class="mask" fill="black" />
    </g>
</svg>
<img src="http://kimjonginathong.com/paranormal/src/1408658687879.jpg" />

CSS

html, body{
    margin: 0;
    padding: 0;
}
svg{
    position: absolute;
    top: 0;
    left: 0;
}
.mask{
    mask: url(#mask1);
    -webkit-mask: url(#mask1);
}

JavaScript

$('.mask').mousemove(function(e){
   var x = e.offsetX;
   var y = e.offsetY + $(window).scrollTop();
   $('#svg_1').attr('cx',  x-50);
   $('#svg_1').attr('cy',  y);
   $('#svg_2').attr('cx',  x+50);
   $('#svg_2').attr('cy',  y);
});