HTML + CSSArrière-plans

Fond en nid d’abeille

Un nid d’abeille plein écran dont les hexagones s’allument au hasard, comme une grille vivante, en HTML et CSS.

Réglages

1x
1x
1

Code

<div class="pt-hex"><p><i style="--t:4.0s;--dl:1.8"></i><i style="--t:8.8s;--dl:1.3"></i><i style="--t:8.8s;--dl:9.7"></i><i style="--t:6.5s;--dl:1.1"></i><i style="--t:4.7s;--dl:4.1"></i><i style="--t:6.7s;--dl:6.7"></i><i style="--t:6.9s;--dl:3.1"></i><i style="--t:6.9s;--dl:7.7"></i><i style="--t:4.2s;--dl:0.7"></i><i style="--t:6.7s;--dl:6.0"></i><i style="--t:8.5s;--dl:1.8"></i><i style="--t:5.8s;--dl:3.7"></i><i style="--t:7.7s;--dl:7.4"></i><i style="--t:9.0s;--dl:8.9"></i><i style="--t:8.5s;--dl:3.1"></i><i style="--t:5.2s;--dl:8.6"></i><i style="--t:6.2s;--dl:4.3"></i><i style="--t:7.7s;--dl:9.5"></i></p><p><i style="--t:8.2s;--dl:8.1"></i><i style="--t:9.5s;--dl:2.9"></i><i style="--t:5.3s;--dl:8.4"></i><i style="--t:7.0s;--dl:7.8"></i><i style="--t:9.2s;--dl:6.5"></i><i style="--t:8.1s;--dl:9.6"></i><i style="--t:6.7s;--dl:9.3"></i><i style="--t:9.4s;--dl:3.0"></i><i style="--t:4.8s;--dl:4.7"></i><i style="--t:5.4s;--dl:5.0"></i><i style="--t:6.3s;--dl:0.8"></i><i style="--t:5.1s;--dl:5.5"></i><i style="--t:4.9s;--dl:5.4"></i><i style="--t:7.9s;--dl:8.7"></i><i style="--t:9.3s;--dl:4.5"></i><i style="--t:6.4s;--dl:8.2"></i><i style="--t:7.2s;--dl:6.6"></i><i style="--t:7.0s;--dl:4.6"></i></p><p><i style="--t:7.0s;--dl:2.2"></i><i style="--t:8.6s;--dl:1.8"></i><i style="--t:6.8s;--dl:4.5"></i><i style="--t:9.1s;--dl:9.3"></i><i style="--t:6.7s;--dl:1.3"></i><i style="--t:4.9s;--dl:2.0"></i><i style="--t:8.9s;--dl:6.7"></i><i style="--t:7.8s;--dl:5.3"></i><i style="--t:10.0s;--dl:10.0"></i><i style="--t:4.6s;--dl:7.6"></i><i style="--t:5.0s;--dl:6.2"></i><i style="--t:5.9s;--dl:6.1"></i><i style="--t:8.3s;--dl:5.7"></i><i style="--t:6.5s;--dl:7.4"></i><i style="--t:9.0s;--dl:2.1"></i><i style="--t:7.5s;--dl:6.0"></i><i style="--t:6.3s;--dl:1.4"></i><i style="--t:5.3s;--dl:3.0"></i></p><p><i style="--t:8.9s;--dl:4.9"></i><i style="--t:7.6s;--dl:7.3"></i><i style="--t:9.9s;--dl:0.2"></i><i style="--t:7.7s;--dl:5.8"></i><i style="--t:6.6s;--dl:9.1"></i><i style="--t:6.6s;--dl:1.7"></i><i style="--t:8.9s;--dl:4.7"></i><i style="--t:4.2s;--dl:7.3"></i><i style="--t:5.5s;--dl:3.9"></i><i style="--t:6.6s;--dl:1.6"></i><i style="--t:7.8s;--dl:8.6"></i><i style="--t:9.9s;--dl:8.7"></i><i style="--t:6.1s;--dl:1.3"></i><i style="--t:6.8s;--dl:4.9"></i><i style="--t:7.0s;--dl:3.3"></i><i style="--t:5.7s;--dl:6.1"></i><i style="--t:5.9s;--dl:6.0"></i><i style="--t:4.0s;--dl:3.3"></i></p><p><i style="--t:9.1s;--dl:6.8"></i><i style="--t:5.7s;--dl:0.8"></i><i style="--t:5.6s;--dl:4.0"></i><i style="--t:5.1s;--dl:6.5"></i><i style="--t:4.8s;--dl:8.0"></i><i style="--t:9.2s;--dl:6.6"></i><i style="--t:4.8s;--dl:8.6"></i><i style="--t:7.6s;--dl:2.3"></i><i style="--t:5.4s;--dl:2.9"></i><i style="--t:7.0s;--dl:8.3"></i><i style="--t:5.5s;--dl:1.2"></i><i style="--t:9.0s;--dl:2.8"></i><i style="--t:7.2s;--dl:6.9"></i><i style="--t:5.1s;--dl:9.7"></i><i style="--t:9.0s;--dl:4.6"></i><i style="--t:7.8s;--dl:2.9"></i><i style="--t:5.7s;--dl:2.2"></i><i style="--t:4.3s;--dl:1.0"></i></p><p><i style="--t:4.9s;--dl:0.7"></i><i style="--t:5.7s;--dl:3.9"></i><i style="--t:9.2s;--dl:9.4"></i><i style="--t:4.7s;--dl:1.8"></i><i style="--t:5.5s;--dl:7.5"></i><i style="--t:5.4s;--dl:5.5"></i><i style="--t:6.4s;--dl:3.6"></i><i style="--t:8.8s;--dl:1.6"></i><i style="--t:7.4s;--dl:6.9"></i><i style="--t:9.7s;--dl:4.2"></i><i style="--t:5.2s;--dl:3.2"></i><i style="--t:9.3s;--dl:5.9"></i><i style="--t:8.0s;--dl:6.0"></i><i style="--t:9.0s;--dl:6.3"></i><i style="--t:9.6s;--dl:7.3"></i><i style="--t:5.1s;--dl:8.9"></i><i style="--t:9.8s;--dl:5.7"></i><i style="--t:8.9s;--dl:4.4"></i></p><p><i style="--t:5.2s;--dl:3.6"></i><i style="--t:8.1s;--dl:1.7"></i><i style="--t:9.8s;--dl:7.2"></i><i style="--t:5.0s;--dl:5.9"></i><i style="--t:6.5s;--dl:4.0"></i><i style="--t:4.1s;--dl:1.4"></i><i style="--t:8.8s;--dl:2.5"></i><i style="--t:8.8s;--dl:0.1"></i><i style="--t:9.4s;--dl:2.5"></i><i style="--t:4.3s;--dl:9.0"></i><i style="--t:9.6s;--dl:0.1"></i><i style="--t:9.0s;--dl:6.3"></i><i style="--t:9.6s;--dl:9.6"></i><i style="--t:5.2s;--dl:2.6"></i><i style="--t:5.7s;--dl:9.0"></i><i style="--t:10.0s;--dl:3.8"></i><i style="--t:8.0s;--dl:5.5"></i><i style="--t:4.0s;--dl:0.1"></i></p><p><i style="--t:9.8s;--dl:5.5"></i><i style="--t:9.2s;--dl:7.6"></i><i style="--t:4.9s;--dl:1.3"></i><i style="--t:9.1s;--dl:5.3"></i><i style="--t:6.3s;--dl:4.6"></i><i style="--t:9.1s;--dl:7.4"></i><i style="--t:9.3s;--dl:6.7"></i><i style="--t:9.5s;--dl:9.2"></i><i style="--t:8.4s;--dl:5.0"></i><i style="--t:7.4s;--dl:5.3"></i><i style="--t:7.1s;--dl:4.2"></i><i style="--t:5.4s;--dl:5.6"></i><i style="--t:10.0s;--dl:0.5"></i><i style="--t:8.8s;--dl:5.4"></i><i style="--t:8.5s;--dl:1.0"></i><i style="--t:8.4s;--dl:8.5"></i><i style="--t:5.2s;--dl:3.8"></i><i style="--t:5.4s;--dl:5.8"></i></p><p><i style="--t:6.5s;--dl:5.9"></i><i style="--t:6.7s;--dl:4.2"></i><i style="--t:9.3s;--dl:3.1"></i><i style="--t:4.6s;--dl:9.1"></i><i style="--t:9.8s;--dl:7.1"></i><i style="--t:5.6s;--dl:1.5"></i><i style="--t:5.6s;--dl:7.8"></i><i style="--t:4.2s;--dl:7.0"></i><i style="--t:7.0s;--dl:3.8"></i><i style="--t:4.3s;--dl:8.7"></i><i style="--t:5.8s;--dl:0.6"></i><i style="--t:9.2s;--dl:7.4"></i><i style="--t:9.9s;--dl:2.9"></i><i style="--t:9.8s;--dl:3.3"></i><i style="--t:5.7s;--dl:4.6"></i><i style="--t:6.2s;--dl:7.4"></i><i style="--t:5.9s;--dl:0.1"></i><i style="--t:7.9s;--dl:8.4"></i></p><p><i style="--t:5.3s;--dl:7.6"></i><i style="--t:8.8s;--dl:2.9"></i><i style="--t:8.0s;--dl:8.8"></i><i style="--t:6.0s;--dl:3.3"></i><i style="--t:7.2s;--dl:0.2"></i><i style="--t:5.7s;--dl:4.9"></i><i style="--t:7.1s;--dl:7.0"></i><i style="--t:6.0s;--dl:2.9"></i><i style="--t:4.3s;--dl:0.9"></i><i style="--t:7.8s;--dl:5.6"></i><i style="--t:6.9s;--dl:5.0"></i><i style="--t:4.9s;--dl:4.6"></i><i style="--t:9.4s;--dl:1.4"></i><i style="--t:7.9s;--dl:9.5"></i><i style="--t:7.7s;--dl:4.5"></i><i style="--t:9.3s;--dl:3.5"></i><i style="--t:4.2s;--dl:0.9"></i><i style="--t:9.3s;--dl:7.1"></i></p><p><i style="--t:6.8s;--dl:1.3"></i><i style="--t:6.8s;--dl:7.9"></i><i style="--t:9.5s;--dl:2.6"></i><i style="--t:6.4s;--dl:7.3"></i><i style="--t:5.3s;--dl:6.0"></i><i style="--t:5.5s;--dl:1.0"></i><i style="--t:6.1s;--dl:2.0"></i><i style="--t:6.7s;--dl:3.6"></i><i style="--t:6.2s;--dl:9.3"></i><i style="--t:5.5s;--dl:7.7"></i><i style="--t:9.5s;--dl:2.6"></i><i style="--t:7.1s;--dl:7.8"></i><i style="--t:7.2s;--dl:0.4"></i><i style="--t:6.8s;--dl:7.2"></i><i style="--t:6.8s;--dl:1.3"></i><i style="--t:4.3s;--dl:7.2"></i><i style="--t:9.6s;--dl:0.6"></i><i style="--t:5.6s;--dl:6.7"></i></p><p><i style="--t:7.6s;--dl:9.0"></i><i style="--t:7.0s;--dl:9.4"></i><i style="--t:6.8s;--dl:6.4"></i><i style="--t:9.6s;--dl:3.8"></i><i style="--t:9.1s;--dl:5.2"></i><i style="--t:6.1s;--dl:3.5"></i><i style="--t:5.0s;--dl:7.9"></i><i style="--t:4.5s;--dl:9.3"></i><i style="--t:8.1s;--dl:9.8"></i><i style="--t:9.9s;--dl:5.0"></i><i style="--t:7.8s;--dl:4.4"></i><i style="--t:7.1s;--dl:6.7"></i><i style="--t:6.7s;--dl:3.0"></i><i style="--t:4.7s;--dl:6.8"></i><i style="--t:4.1s;--dl:3.5"></i><i style="--t:7.4s;--dl:5.0"></i><i style="--t:5.6s;--dl:2.0"></i><i style="--t:4.8s;--dl:9.8"></i></p></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Arrière-plans

Voir tout : Arrière-plans

Où l’utiliser

Une grille d’hexagones qui s’allument et s’éteignent a un côté technologique et science-fiction, parfait derrière l’en-tête d’une société de cybersécurité, la page d’un hackathon ou le menu principal d’un jeu de stratégie. Les alvéoles s’éclairent au hasard dans vos couleurs, et les bords se fondent dans le fond pour garder le centre dégagé.

Augmentez l’échelle pour des alvéoles plus grandes et plus calmes derrière un long titre, ou réduisez-la pour une texture plus dense. Une vitesse plus lente l’empêche de concurrencer le texte. Pour un loader assorti, l’anneau d’hexagones de cette bibliothèque partage le même style.