Pluie de Neige ❅

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Neige qui tombe sur votre page web avec Emoji</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>❄️</text></svg>" />
<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 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();
/***
Neige qui tombe réalisé par sync - 2026 - (𝓥er:1.0)
Auteur : Feuille d'heures Angélique
Site : https://feuille-heures-angelique.alwaysdata.net/plus/Page_Divers.html

Licence :
- Usage personnel autorisé
- Modification autorisée
- Redistribution autorisée uniquement avec crédit visible
- Interdiction de revente et suppression de l’auteur

Ce projet reste la propriété de son auteur original.
***/
</script>
<div style="margin: 15px;">
<footer style="position:relative; margin:0 auto; width:330px; 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.alwaysdata.net/" style="text-decoration: none; color: inherit;">Calculatrice d’heures - Feuille d'Heures Angélique (fr)</a></p></footer></div>
</body>
</html>