By · Updated

Isometric Grid Pattern Generator

Seamless 30° Grid Tiles and Backgrounds, Free PNG

No ratings yet

Loading…

OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.

How the Isometric Grid Pattern Generator works

This isometric grid pattern generator makes printable triangle paper. An isometric grid is the triangular lattice behind isometric drawing: lines at 30 degrees left and right plus verticals, dividing the page into equilateral triangles. Choose full lines for isometric graph paper, diamonds without the verticals, a dot grid, or triangles randomly filled from the palette, then save a seamless square tile or a tiled wallpaper as PNG. Nothing leaves your browser.

Isometric grid pattern generator: four styles

Lines draws all three families of lines and is the classic isometric graph paper used for sketching cubes, buildings and pixel-art mockups. Diamonds leaves out the verticals so the tile reads as a rhombus lattice, the same grid you see on chain-link fencing and diamond plate. Dots marks only the lattice points, at a size set by Line weight, for a subtler guide that stays out of the way of what is drawn on top. Random triangles keeps the lines and fills a share of the triangles between them, set by the Filled triangles slider, with one of three tints from the palette chosen by the seed; Regenerate picks a new arrangement, and typing an old seed back recovers it.

Why the rows are odd numbers

A true isometric grid has lines at exactly 30 degrees, and tan 30° is 1/√3, an irrational number, so no square tile can hold a whole number of periods in both directions at that exact angle. The generator uses row counts where a whole number of vertical columns also fits with the angle within a third of a degree of 30: 7 rows with 8 columns at 29.7°, 12 rows with 14 columns at 30.3°, 19 with 22 at 30.1° and 26 with 30 at 30.0°. The difference is invisible even at 4K, and the Line angle stat under the preview shows the exact figure for the row count you picked.

Seamless edges

Every line runs the full width of the tile and starts at a height that is a whole number of rows, so the point where it leaves the right edge is exactly the point where the next copy's line enters on the left. Filled triangles are keyed by their wrapped lattice position, so a triangle cut by the tile boundary gets the same tint on both sides. The preview shows the tile repeated three across by default; set Preview repeats to 1 to inspect a single tile.

Saving

Export a square tile at 256, 512, 1024 or 2048 pixels for use as a CSS background, a drawing guide layer, a game texture or a fill in a design tool, or a tiled wallpaper at 1920 × 1080 or 3840 × 2160 where the tile is repeated at the preview scale. Files are PNG, drawn on a canvas on your machine and saved straight from the browser.

FAQ

Can I print this as isometric graph paper?

Yes. Choose Graph paper for a pale grid on white, Lines for the style, export a 2048 tile and place it in any page-layout or word-processing app repeated to fill the page. The lines are thin enough to draw over and light enough not to dominate a scan.

Why is the angle not exactly 30 degrees?

Because a seamless square tile needs whole periods in both directions and exact 30-degree lines never give that. The largest row count, 26, is within a few hundredths of a degree, and every option is closer to 30 degrees than a hand-drawn grid would be.

How do I get a plain grid with no random fills?

Pick Lines, Diamonds or Dots. Those styles use no randomness at all, so the seed has no effect and Regenerate changes nothing; only Random triangles reads the seed.

What is the difference between this and the hex grid generator?

The hex grid draws honeycomb cells; this one draws the triangular lattice that underlies isometric projection. The two are related, since joining every second lattice point of an isometric grid gives hexagons, but they are used for different things: hexes for maps and mosaics, isometric grids for drawing guides and technical backgrounds.

See also: all Generative Art tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.

Related tools