Turn a flat logo into an isometric badge

Isometric drawing keeps every parallel line parallel. There is no horizon and no vanishing point, so a block at the back of the scene is exactly as large as one at the front. That sounds like a limitation, but it is the reason the style works so well for diagrams: you can measure anything, compare anything, and line things up without fighting perspective.

Choosing the three face colours

Performance is rarely a problem for one hero cube, but a scene with fifty transformed blocks is a different story. Each block may become its own compositing layer, and every layer costs memory. Open the Layers panel before you ship and count them. If the number surprises you, flatten the static parts into a single SVG.

1. Sketch the layout

   Draw the room on triangle-grid paper and number the tiles by column and row.

2. Create the grid

   Use display: grid with equal columns and rows on the tilted floor.

3. Place the furniture

   Position each block with grid-area and sort the markup by depth.

4. Add the walls

   Two extra planes, rotated upright, close the room at the back.

5. Check it on a phone

   Scale the scene with clamp() so it never overflows the viewport.

The code

SVG is often the better choice for complex scenes. CSS cubes are fun to build and easy to animate, but a city block made of hundreds of divs is hard to change and heavy to render. We draw the static parts in SVG, keep the interactive blocks in CSS, and layer the two together.

Before we publish any illustration we run it through a short review. Is the light direction consistent? Does every block sit on the grid? Is the art hidden from screen readers where it is decorative? Does it survive forced colours mode? It takes five minutes and catches most of the problems we used to fix after launch.

Game artists have a name for the pixel-art version of isometric: two-to-one. Lines climb one pixel for every two across, which gives clean, stair-stepped edges instead of jagged ones. The angle is about 26.6 degrees rather than 30, and almost nobody notices, which is a nice reminder that looking right beats being exact.

We keep every demo in a small repository with one folder per post. Each folder has the HTML, the CSS and a short note on what we tried and dropped. Months later, when a reader asks why a tutorial does something a certain way, the note usually has the answer and saves us a long investigation.

Grids are the backbone of every scene we draw. A single grid unit decides tile width, block height and spacing, which is why our illustrations line up even when three different people made them. When something looks off, the first thing we check is whether one element quietly ignored the grid.

.floor {	background-image:		repeating-linear-gradient(30deg, var(--line) 0 1px, transparent 1px 40px),		repeating-linear-gradient(150deg, var(--line) 0 1px, transparent 1px 40px);}

<label class="toggle">	<input type="checkbox">	<span class="block"></span>	Dark mode</label>

.toggle input:checked + .block {	translate: 2rem 0;}

toggle.addEventListener('change', (event) => {	document.body.classList.toggle('dark', event.target.checked);});

Colours used

Edges and highlights

Readers often ask whether isometric art is still a trend or already a cliché. Our answer is that the style is a tool, like a chart type. It is excellent for explaining structure and relationships, and it is a poor choice for emotion or narrative. Used for the right job, it never really goes out of date.