Hurt

	<!DOCTYPE html>
	<html>
	<head>
	<title>Hurt</title>
	</head>
	<body>



	<script type="text/javascript">
	document.addEventListener("mousemove" , function(e) {
	var body = document.querySelector('body');
	var heart = document.createElement("span");
	var x = e.offsetX;
	var y = e.offsetY;
	heart.style.left = x+'px';
	heart.style.top = y+'px';
	var size = Math.random() * 100;
	heart.style.width = 20+size+'px';
	heart.style.height = 20+size+'px';
	body.appendChild(heart);

	setTimeout(function(){
	heart.remove();
	} , 2000);
	})
	</script>

	</body>
	</html>


	<style type="text/css">


	*{
	margin: 0px;
	padding: 0px;
	}

	body{
	overflow: hidden;
	background: #000;
	height: 100vh;
	}

	span{
	position: absolute;
	background: url(heart.png);
	pointer-events: none;
	transform: translate(-50%, -50%);
	animation: animate 2s linear infinite;
	width: 100px;
	height: 100px;
	background-size: cover;
	}

	@keyframes animate
	{

	0%{transform: translate(-50%,-50%); opacity: 1; filter: hue-rotate(0deg);}
	100%{transform: translate(-50%,-1000%); opacity: 1; filter: hue-rotate(720deg);}



	}

	</style>

Code Design html