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.

What is the Isometric Grid SVG Generator?

Generate tileable isometric grid backgrounds as SVG for technical illustration and architecture diagrams. Choose line or dot mode and adjust cell size, projection angle, weight, and colour, then copy CSS or raw SVG. It runs free in your browser on Gera Tools, with nothing uploaded.

Isometric Grid SVG Generator

Name: Isometric Grid SVG Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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;

At the standard 30° angle with a 40px cell, rise = 40 × tan(30°) = 40 × 0.5774 ≈ 23.1px, so the tile height is 2 × 23.1 = 46.2px. The CSS background-size carries the full decimal to keep the tiling seamless — rounding to 46px introduces a visible hairline gap that accumulates across the canvas.

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

Line mode vs. dot mode: when to use each

Line mode draws the full isometric lattice — three families of parallel lines at 0°, 60°, and 120° from the horizontal (or equivalently, two diagonal families at ±30° from horizontal, plus vertical lines). Use it when you need a complete grid for plotting objects, drawing axonometric diagrams, or building isometric illustrations where alignment to the lattice is important.

Dot mode places a marker only at each intersection point of the lattice. The result is a quiet, minimal reference grid that shows where the lattice points are without drawing all the connecting lines. Dot mode is particularly useful for:

Sketching isometric icons on a canvas without being distracted by the lines.
Adding a light “graph paper” texture to technical slides or UI mockups.
Backgrounds where you want the isometric aesthetic without visual noise.

Worked example: typical settings

For a technical diagram on a white background:

Mode: line
Angle: 30° (true isometric)
Cell size: 40px (medium density, clear grid spacing)
Line weight: 0.5px
Colour: #e0e0e0 (light grey, low contrast)

The resulting CSS tile is roughly 40×46px, weighs about 200 bytes, and repeats seamlessly across any canvas size.

For a pixel-art reference grid on a dark background:

Mode: dot
Angle: 30°
Cell size: 20px (tighter, matches common pixel art cell sizes)
Dot radius: 1px
Colour: #555555

This gives a dense but unobtrusive reference you can sketch over without the dots competing with your art.

Isometric vs. dimetric projections

True isometric projection uses exactly 30°, which creates the 2:1 width-to-height ratio characteristic of classic pixel-art game environments and technical drawings. At 30°, equal horizontal distances in X, Y, and Z directions all appear the same length, which is what “isometric” (equal measure) means.

Dimetric projection uses a different angle (commonly 26.57° for a 2:1 pixel-perfect raster grid, or other values for stylistic effect). Two of the three axes appear equal; the third does not. The angle slider on this generator lets you explore the full range. Angles other than 30° are perfectly valid for illustration, but true isometric diagrams and icons should use 30°.

Using the output

As a CSS background: paste the generated background-image and background-size lines directly into your element’s CSS. The tile repeats automatically via background-repeat: repeat.

As an SVG file: copy the raw SVG, save it as a .svg file, and import it into Figma, Illustrator, or Inkscape as a pattern fill or background.

In HTML canvas: use the SVG as an Image source, draw it tiled across the canvas before drawing your content, or convert it to a pattern with createPattern().

The background-size in the copied CSS is computed to full decimal precision — do not round it when pasting, as even a 0.1px error accumulates into visible seams across a large canvas.