Pluie de Neige ❅

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Pluie de neige ❄️</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	background: linear-gradient(135deg, #0b1225, #66CC99);
	color: #ffffff;
	overflow: hidden;
	text-align: center;
	user-select: none;
}

#snowCanvas {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

h1 {
	margin-top: 80px;
	font-size: 48px;
	text-shadow: 0 0 10px #000;
}
</style>
</head>

<body>
<h1>Pluie de Neige ❅</h1>
<canvas id="snowCanvas"></canvas>
<script type="text/javascript" language="javascript">
	const canvas = document.getElementById('snowCanvas');
	const ctx = canvas.getContext('2d');
	let width = window.innerWidth;
	let height = window.innerHeight;
		canvas.width = width;
		canvas.height = height;

const numFlakes = 120; // plus = neige plus dense
	const flakes = [];

function createFlake() {
		const size = Math.random() * 20 + 10; // taille du caractère
		return {
			x: Math.random() * width,
			y: -size,
			size: size,
			speedY: Math.random() * 2 + 1, // vitesse verticale
			speedX: Math.random() * 1 - 0.5, // léger mouvement horizontal
			opacity: Math.random() * 0.8 + 0.2
		};
	}

function createFlakes() {
		for (let i = 0; i < numFlakes; i++) {
			flakes.push(createFlake());
		}
	}

function drawFlakes() {
		ctx.clearRect(0, 0, width, height);
		ctx.font = "bold 24px Arial";
		for (let i = flakes.length - 1; i >= 0; i--) {
			const f = flakes[i];
			ctx.globalAlpha = f.opacity;
			ctx.font = `${f.size}px serif`;
			ctx.fillStyle = "white";
			ctx.fillText("❅", f.x, f.y); /*  ❅  ❄️  */
			f.y += f.speedY;
			f.x += f.speedX;

if (f.y > height) {
				flakes.splice(i, 1);
				flakes.push(createFlake());
			}
		}
		ctx.globalAlpha = 1.0;
	}

function animateSnow() {
		drawFlakes();
		requestAnimationFrame(animateSnow);
	}

window.addEventListener('resize', () => {
		width = window.innerWidth;
		height = window.innerHeight;
		canvas.width = width;
		canvas.height = height;
	});

createFlakes();
	animateSnow();
</script>
<p style="margin: 5;">
<footer style="position:relative; margin:0 auto; width:50%; text-align:center; border-radius:20px; overflow:hidden; box-shadow:0 0 12px rgba(0,0,0,0.3); padding:10px 0; font-family:sans-serif; font-size:12px;"><p style="margin: 0;"><a href="https://feuille-heures-angelique.neocities.org/" style="text-decoration: none; color: inherit;">Calculatrice d’heures - Feuille d'Heures Angélique (FR)</a></p></footer></p>
</body>
</html>