AIMRAN
HTML + CSSArrière-plans

Pavage de cubes isométriques

Une mosaïque de cubes en perspective isométrique glisse en diagonale pendant qu'un reflet doux la parcourt.

Réglages

1x
1x
1

Code

<div class="pt-iso-cubes"><svg aria-hidden="true"><defs><pattern id="pt-iso-tile" width="38.105" height="66" patternUnits="userSpaceOnUse"><polygon class="t" points="19.05,0.00 38.11,11.00 19.05,22.00 0.00,11.00"/><polygon class="l" points="0.00,11.00 19.05,22.00 19.05,44.00 0.00,33.00"/><polygon class="r" points="19.05,22.00 38.11,11.00 38.11,33.00 19.05,44.00"/><polygon class="t" points="0.00,33.00 19.05,44.00 0.00,55.00 -19.05,44.00"/><polygon class="l" points="-19.05,44.00 0.00,55.00 0.00,77.00 -19.05,66.00"/><polygon class="r" points="0.00,55.00 19.05,44.00 19.05,66.00 0.00,77.00"/><polygon class="t" points="38.11,33.00 57.16,44.00 38.11,55.00 19.05,44.00"/><polygon class="l" points="19.05,44.00 38.11,55.00 38.11,77.00 19.05,66.00"/><polygon class="r" points="38.11,55.00 57.16,44.00 57.16,66.00 38.11,77.00"/><polygon class="t" points="0.00,-33.00 19.05,-22.00 0.00,-11.00 -19.05,-22.00"/><polygon class="l" points="-19.05,-22.00 0.00,-11.00 0.00,11.00 -19.05,0.00"/><polygon class="r" points="0.00,-11.00 19.05,-22.00 19.05,0.00 0.00,11.00"/><polygon class="t" points="38.11,-33.00 57.16,-22.00 38.11,-11.00 19.05,-22.00"/><polygon class="l" points="19.05,-22.00 38.11,-11.00 38.11,11.00 19.05,0.00"/><polygon class="r" points="38.11,-11.00 57.16,-22.00 57.16,0.00 38.11,11.00"/></pattern></defs><rect width="100%" height="100%" fill="url(#pt-iso-tile)"/></svg><i class="lt"></i></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

Dégradé mesh

Arrière-plansHTML + CSS

Fond aurore boréale

Arrière-plansHTML + CSS

Dégradé qui respire

Arrière-plansHTML + CSS

Coucher de soleil liquide

Arrière-plansHTML + CSS

Grille de points en onde

Arrière-plansHTML + CSS

Grille synthwave

Arrière-plansHTML + CSS

Fond en nid d’abeille

Arrière-plansHTML + CSS

Lignes diagonales lumineuses

Arrière-plansHTML + CSS

Où l’utiliser

La célèbre illusion des cubes en escalier devenue fond vivant. Chaque cube a trois faces dans tes trois couleurs, dessus, gauche et droite, si bien que le pavage se lit comme des blocs pleins en 3D ou comme des étoiles plates selon le regard. Toute la surface glisse en diagonale d'exactement une tuile pour une boucle sans raccord.

C'est du HTML, du SVG intégré et du CSS pur, sans JavaScript. La densité change la taille des cubes, la vitesse le défilement, et un reflet doux ajoute de la profondeur. Le mouvement réduit arrête les deux animations. Idéal pour la tech, l'architecture et le jeu vidéo.