Tiny Online Tools
Isometric 3D Cubes Rendered as Flat SVG
Isometric illustrations — three-colored cubes stacked in a grid — are instantly recognizable and surprisingly easy to compose when you use SVG. This generator builds a grid of cubes where each cube is three <polygon> rhombi (top, left, right) filled with three different colors you choose.
How the Cubes are Drawn
For each (col, row) position in the grid, the tool computes isometric offsets (cos(30°) on X, sin(30°) on Y) so cubes line up perfectly. With the height-variance toggle on, each cube randomly gets a stack height from 1 to 3, giving the pattern that characteristic "city from above" look.
A seed controls which cubes are drawn, which are skipped (for gaps), and the height of each stack. Hit re-roll to explore new layouts while keeping your palette.
Controls
- Columns / Rows — grid size.
- Tile size — how big each cube is.
- Top / Left / Right color — three face colors. Pick complementary shades for depth.
- Background — fill behind the cubes.
- Height variance — toggle random stack heights.
Uses
- Architecture & construction site backgrounds
- Data-dashboard hero images
- Editorial illustrations for articles about real estate, cities, or blockchain
- Video-game tiles (terrain, cityscape)
- Presentation slide decorations
Because every cube is a group of polygons, you can post-process individual cubes' colors with a find-and-replace, or animate them with CSS for playful transitions.