gradient.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Gradient</title>
		<meta property="og:title" content="">
		<meta name="description" content="">
		<meta property="og:description" content="">
		<meta name="author" content="">
		<meta property="og:image" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body style="height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0;" onload="load()">
		<canvas id="canvasElement" width="720" height="720" max-width="100vw" style="max-width: 100vw; border-radius: 100%;"></canvas>
		<script>
			const canvas = document.getElementById("canvasElement");
			const ctx = canvas.getContext("2d");
			ctx.globalCompositeOperation = "difference";
			ctx.filter="brightness(140%) saturate(120%)";
			let canvasX = 0;
			let canvasY = 0;
			let mouseX = 360;
			let mouseY = 360;
			let radiusAdjustment = 0;

			function load() {
				setup();
				update();
			}

			function setup() {
				getCanvasPosition();
			}

			function update() {
				ctx.clearRect(0, 0, 720, 720);

				let lingrd = ctx.createLinearGradient(0, 0, mouseX*10, mouseY*10);
				lingrd.addColorStop(0, "#c32933");
				lingrd.addColorStop(0.1, "#852e39");
				lingrd.addColorStop(1, "#852e39");
				ctx.fillStyle = lingrd;
				ctx.fillRect(0, 0, 720, 720);
			
				let radgrd = ctx.createRadialGradient(360, 360, 0, mouseX, mouseY, 540+radiusAdjustment);
				radgrd.addColorStop(0, "rgba(110, 38, 30, 1)");
				radgrd.addColorStop(1, "rgba(113, 84, 58, 1)");
				ctx.fillStyle = radgrd;
				ctx.fillRect(0, 0, 720, 720);

				requestAnimationFrame(update);
			}

			function getCanvasPosition() {
				canvasX = canvas.offsetLeft + canvas.clientLeft;
				canvasY = canvas.offsetTop + canvas.clientTop;
			}

			function onMouseMove(e) {
				mouseX = e.clientX - canvasX;
				mouseY = e.clientY - canvasY;
				if(mouseX < 180) {
					radiusAdjustment = mouseX;
				}
			}

			window.addEventListener('resize', getCanvasPosition);
			canvas.addEventListener("mousemove", onMouseMove, false);
		</script>
	</body>
</html>