HTML + CSSArrière-plans

Courbes de niveau topographiques

Des courbes de niveau façon carte qui dérivent lentement à l'écran comme un relief vivant, dessinées en canvas.

Réglages

1x
1x
1

Code

<div class="pt-topo"><canvas></canvas></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Arrière-plans

Voir tout : Arrière-plans

Où l’utiliser

Un fond plein écran inspiré des cartes topographiques. Un champ de hauteurs doux évolue dans le temps et un passage de marching squares le transforme en courbes de niveau, si bien que collines et vallées gonflent, fusionnent et se séparent sous tes yeux. Une ligne sur quatre est plus épaisse et prend la troisième couleur, comme les courbes maîtresses d'une carte imprimée.

La densité règle le nombre de niveaux, la vitesse celle du relief, et les trois couleurs vont des creux aux sommets. Idéal pour les marques outdoor, les sites de voyage, les produits de données et les pages d'accueil calmes.