//- h1 💩 
h1 ♥
View Compiled
*
	margin: 0
	border: 0
	box-sizing: border-box
html,
body
	height: 100%
	width: 100%
	text-align: center
	font-family: 'Aclonica', sans-serif
	letter-spacing: 3px
	display: flex
	justify-content: center
	align-items: center
	h1
		font-size: 200px
		color: transparent
		user-select: none		
		text-shadow: 0 0 0 rgba(255, 0, 0, 0.2)
View Compiled
const $ = document.querySelector.bind(document);
const MAX = 50;

function shadow(e) {
	const { offsetWidth: width, offsetHeight: height } = $('body');
	let { offsetX: x, offsetY: y} = e;
	
	if (this !== e.target) {
		x = x + e.target.offsetLeft;
		y = y + e.target.offsetTop;
	}
	
	const xNow = Math.round((x / width * MAX) - (MAX / 2));
	const yNow = Math.round((y / height * MAX) - (MAX / 2));
	
	if ((xNow === 0) && (yNow === 0)) {
		$('h1').style.textShadow = `
		${xNow}px ${yNow}px 0 rgba(255, 0, 0, 0.2)`;
		return;
	} 
	
	$('h1').style.textShadow = `
		${xNow}px ${yNow}px 0 rgba(0, 255, 0, 0.2),
		${xNow * -1}px ${yNow * -1}px 0 rgba(255, 255, 0, 0.2)
	`;
}

$('body').addEventListener('mousemove', shadow);
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Aclonica

External JavaScript

This Pen doesn't use any external JavaScript resources.