JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<svg width="976" height="549" xmlns="http://www.w3.org/2000/svg">
    <defs>http://jsfiddle.net/krazyjakee/Lyaa6894/#run
      <radialGradient id="lightsource">
        <stop offset="0%" stop-color="#000" />
        <stop offset="30%" stop-color="#000" />
        <stop offset="60%" stop-color="#333" />
        <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 filter="url(#f1)" ry="100" rx="100" id="svg" cy="122.5" cx="101.5" stroke-width="none" fill="url(#lightsource)"/>
      </mask>
      <filter id="f1" x="-100%" y="-50%" width="10" height="10">
        <feOffset result="light1" in="SourceGraphic" dx="-50" dy="20" />
        <feOffset result="light2" in="SourceGraphic" dx="50" dy="20" />
        <feOffset id="light3" result="light3" in="SourceGraphic" dx="0" dy="-55" />
        <feBlend result="blend1" in="light1" in2="light2" mode="multiply" />
        <feBlend in="blend1" in2="light3" mode="multiply" />
      </filter>
    </defs>
    <g>
        <rect x="0" y="0" id="cool" width="976" height="549" mask="url(#mask1)" fill="black" />
    </g>
</svg>
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />

CSS

html, body{
    margin: 0;
    padding: 0;
}
svg{
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

$('#cool').mousemove(function(e){
   var x = e.offsetX;
   var y = e.offsetY;
   x -= ($('#svg').attr('rx') * 2;
   y -= $('#svg').attr('ry') * 2;
   $('#light3').attr('dx',  x);
   $('#light3').attr('dy',  y);
});