Поворот тени элемента в сторону курсора на javascript

В этой коротенькой статье, я хочу показать как можно реализовать поворот тени элемента в сторону курсора средствами javascript. Для поворота тени будем использовать css. По сути тут все упирается в математику: получаем координаты элемента, координаты курсора, находим третью точку и строим треугольник. Потом получаем угол в треугольнике. После получения угла нам нужно будет узнать в каком квадранте находится курсор и высчитать уже необходимый угол. На рисунке я схематично изобразил процесс:

Поворот тени элемента в сторону курсора. Код

Ниже приведу javascript код, который работает с использованием библиотеки jQuery

$(document).ready(function(){
	// при движении курсора вызываем функцию
	$(document).mousemove(function(e){
		moveShadow(e);
	});
});

// поворот тени за курсором
function moveShadow(e){
	// получаем координаты блока с текстом
	var x1 = $('#text').offset().left;
	var y1 = $('#text').offset().top;
	// координаты курсора
	var x2 = e.pageX;
	var y2 = e.pageY;
	// координаты третей точки, чтоб получить треугольник
	var x3 = x2;
	var y3 = y1;
	
	// высчитываем угол
	var cos = (((x1-x2)*(x1-x2))+((y1-y2)*(y1-y2))+((x1-x3)*(x1-x3))+((y1-y3)*(y1-y3))-((x2-x3)*(x2-x3))-((y2-y3)*(y2-y3)))/(2*Math.sqrt(((x1-x2)*(x1-x2))+((y1-y2)*(y1-y2)))*Math.sqrt(((x1-x3)*(x1-x3))+((y1-y3)*(y1-y3))));
	var rad = Math.acos(cos)
	var degree = rad * 180 / Math.PI;
	
	var degree360 = 0;
	if(x2 < x1 && y2 < y1) degree360 = 180 + (90 - degree);
	if(x2 > x1 && y2 < y1) degree360 = 90 + degree;
	if(x2 > x1 && y2 > y1) degree360 = 90 - degree;
	if(x2 < x1 && y2 > y1) degree360 = degree - 90;
	
	
	var distance = 50; // расстояние тени до текста		
	// высчитаваем координаты для тени
	var v = Math.round((distance * Math.cos(Math.PI*degree360/180)));
	var h = Math.round((distance * Math.sin(Math.PI*degree360/180)));
	var stlyle = h+'px '+v+'px 10px rgba(0, 0, 0, 1)';
	
	// поворачиваем тень
	$('#text').css({
		'text-shadow' : stlyle
	});
}

И разметка страницы:

<style>
#text{
	font-size: 50px;
	position: relative;
	top: 300px;
	left: 300px;
}
</style>

<div id="text">TEXT</div>