Tiny Online Tools
Cubes Isométriques 3D Rendus en SVG Plat
Les illustrations isométriques — cubes à trois couleurs empilés sur une grille — sont immédiatement reconnaissables et étonnamment faciles à composer en SVG. Ce générateur construit une grille de cubes où chaque cube est composé de trois losanges <polygon> (haut, gauche, droite) remplis avec trois couleurs au choix.
Comment les Cubes sont Dessinés
Pour chaque (colonne, ligne) de la grille, l'outil calcule les décalages isométriques (cos(30°) en X, sin(30°) en Y) pour un alignement parfait. Avec la variation de hauteur activée, chaque cube obtient aléatoirement une hauteur empilée de 1 à 3, donnant ce look typique "ville vue d'en haut".
Une graine contrôle quels cubes sont dessinés, lesquels sont omis (pour créer des trous) et la hauteur de chaque pile. Cliquez sur relancer pour explorer de nouvelles dispositions tout en gardant votre palette.
Contrôles
- Colonnes / Lignes — taille de la grille.
- Taille de tuile — taille de chaque cube.
- Couleur Haut / Gauche / Droite — trois couleurs de face. Choisissez des tons complémentaires pour la profondeur.
- Arrière-plan — remplissage derrière les cubes.
- Variation de hauteur — bascule les hauteurs empilées aléatoires.
Usages
- Arrière-plans architecture & construction
- Images hero de dashboards de données
- Illustrations éditoriales pour articles sur l'immobilier, les villes, la blockchain
- Tuiles de jeux vidéo (terrain, cityscape)
- Décor de diapositives
Puisque chaque cube est un groupe de polygones, vous pouvez remplacer leurs couleurs à la volée par un find-and-replace ou les animer en CSS pour des transitions ludiques.