<div style="margin:0 auto; width: 5cm; height: 5cm; padding: 1mm 2cm; position: relative;"><div class="round"></div></div>

html{
  background: #44a;
}
.round{
  width: 3cm;
  height: 3cm;
  margin: 1cm auto;
  border-radius: 50%;
  border: 1mm solid #fff;
  
}

function debounce( f, d = 40 ) {
  let t;
  return function( ...a ) {
    clearTimeout( t );
    t = setTimeout( f.bind( this ), d, ...a );
  }
}


const { PI } = Math;
const PI2 = PI * 2;

const deshad = debounce( ( el, da = 0.1, tend = false ) => {
  deshad( el, da, tend );
  const ca = parseFloat( el.dataset[ 'angle' ] );
  const dca = da - ca
  const dda = dca > PI && dca - PI2 || dca < -PI && dca + PI2 || dca;
  if( tend && Math.abs( dda ) < 0.01 ) return;
  const a = ca + ( tend && Math.min( dda / 2, 0.3 ) || da );
  const dx = Math.cos( a ) * 2;
  const dy = Math.sin( a ) * 2;
  el.style.boxShadow = 'rgba( 255, 100, 100, 0.5 ) 0 0 7mm 0mm,' +
    ' rgba( 255, 255, 255, 0.3 ) ' + dx + 'mm ' + dy + 'mm ' + ' 7mm 5mm,' +
    ' inset rgba( 255, 255, 255, 0.2 ) ' + -dx + 'mm ' + -dy + 'mm ' + ' 2mm 0mm';
  el.dataset[ 'angle' ] = a % PI2;
}, 40 );

const round = document.querySelector( '.round' );
const wround = round.parentNode;
round.dataset[ 'angle' ] = 0;

wround.onmousemove = ev => {
  const { offsetX: x, offsetY: y } = ev;
  const { left, top, width, height } = wround.getClientRects() [ 0 ];
  const [ x0, y0 ] = [ width/2, height/2 ];
  const [ dx, dy ] = [ x - x0, y - y0 ];
  const atn = Math.atan( dy/dx );
  const na = ( atn + ( dx < 0 ) * PI + PI2 ) % PI2;
  deshad( round, na, true );
}

wround.onmouseleave = () => deshad( round );

deshad( round );