What angle makes a true isometric grid?

A 30-degree angle from the horizontal gives the classic 2:1 isometric projection used in pixel art and technical drawing, where two horizontal pixels correspond to one vertical pixel of rise. The angle slider lets you deviate for dimetric or near-isometric looks.

How is the grid made tileable?

The generator computes the vertical rise across one cell as cell width times the tangent of the angle, then builds a tile two rises tall so the up-sloping and down-sloping diagonals meet exactly at the tile edges. Repeating that tile produces a seamless lattice.

When should I use dot mode instead of lines?

Dot mode places a marker only at each lattice point, giving a quiet reference grid that does not compete with your drawing. It is ideal as a backdrop for sketching isometric icons or diagrams where solid lines would clutter the view.

Why does the tile height change when I move the angle?

The tile height equals two times the rise, and the rise depends on the tangent of the angle. A steeper angle increases the rise, so the tile gets taller; the copied CSS background-size updates automatically to keep the grid seamless.

Is the output suitable for high-resolution screens?

Yes. The grid is pure vector SVG, so it renders crisply at any zoom level or pixel density without the blurring you would get from a raster grid image. It also stays a few hundred bytes regardless of how large the background is.

Isometric Grid SVG Generator

An isometric grid is the scaffolding behind isometric icons, architecture diagrams, and pixel-art scenes. This generator builds one as a tiny tileable SVG, so you get a crisp, lightweight lattice that scales to any screen and drops in as a CSS background.

How it works

In a 2:1 isometric projection, grid lines run at +30 and -30 degrees from the horizontal. For one cell of width cell, the vertical rise is:

rise = cell × tan(angle)

The tile is made 2 × rise tall so the rising and falling diagonals connect at the tile edges, which lets the browser repeat it seamlessly:

background-image: url("data:image/svg+xml,...");
background-size: 40px 46px;

Dot mode instead places a small circle at each lattice corner and the cell centre, giving a reference grid rather than a solid mesh.

Tips and notes

Stick with 30 degrees for genuine isometric work; other angles produce dimetric grids that still look technical but break true iso alignment. Keep the line weight at 1 and the colour low-contrast against the background so the grid guides the eye without dominating. For sketching, dot mode at a 1–1.5 radius is easiest to draw over. The background-size in the copied CSS is calculated for you, so do not round it — the seamless tiling depends on the exact tile height.