Isometric Grid SVG Generator

Isometric grid SVG: from Cambridge engineering to Stripe illustrations

An isometric grid is a 2D drawing system in which the three principal axes are spaced exactly 120° apart instead of the 90° of a Cartesian grid. The result is a flat surface that reads as 3D — depth, height and width are projected onto the same plane without perspective foreshortening. The technique was coined "isometric" (Greek for "equal measure") by William Farish, a professor at Cambridge, in 1822 as a rigorous way for engineers to draw machinery before the era of CAD.

Geometrically the grid is built from lines at 30°, 90° (or vertical) and 150°, which divide the plane into rhombi whose interior angles are 60° and 120°. Each isometric cube is exactly three of those rhombi — top, left face, right face — joined at a central vertex. This is also why isometric pixel art has such a distinctive "stacking" feel: every block snaps to the same diamond.

SVG construction

The simplest way to render an isometric grid in SVG is to draw three sets of evenly spaced parallel lines at 30°, 90° and 150°, clipped to a viewBox:

<svg viewBox="0 0 600 400" stroke="#666" stroke-width="1">
  <g id="iso">
    <!-- 30° lines -->
    <line x1="0" y1="0"   x2="600" y2="346.4"/>
    <!-- 150° lines -->
    <line x1="600" y1="0" x2="0"   y2="346.4"/>
    <!-- vertical lines -->
    <line x1="100" y1="0" x2="100" y2="400"/>
  </g>
</svg>

Because SVG is vector, the entire grid is usually under 2 KB no matter how dense it is — far cheaper than a raster equivalent. The viewBox handles responsive scaling without re-rasterisation.

Where isometric grids are used

• Engineering and architecture — pre-CAD technical drawings, mechanical exploded views.
• Board games — the rhombic grid is a cousin of the hex grid used by Settlers of Catan.
• Video games — SimCity 2000, Diablo II, Don't Starve, Monument Valley, Crusader Kings II; Unity and Godot ship isometric tilemap support.
• Modern illustration — the "flat-isometric" trend that exploded around 2018; Stripe's website is the canonical example.
• Corporate explainer videos — B2B SaaS landing pages rely heavily on isometric scenes to look modern and "structured".

Isometric vs axonometric vs CSS 3D

Axonometric is the umbrella term for any parallel projection — isometric is the special case where the three axis scales are identical. Dimetric (two equal) and trimetric (all different) are siblings. In CSS, you can approximate an isometric look with a 3D transform: transform: rotateX(60deg) rotateZ(-45deg), but it is a hack — real isometric guides drawn in SVG are exact.

Vector design tools that ship native isometric grids include Affinity Designer, Sketch (via plugin) and Adobe Illustrator's perspective grid. Many illustrators export the SVG generated here and use it as a non-printing guide layer in those apps.

Performance and accessibility

SVG line patterns are extremely cheap — even hundreds of <line> elements compress to a few kilobytes. For complex isometric illustrations (not just the grid), provide an aria-label or hidden text description so screen-reader users get the meaning. For grids used purely as background, set aria-hidden="true".

FAQ

30° or 45°? True isometric is 30° from the horizontal. A 45° grid produces a "dimetric" look used in older games (Zelda: A Link to the Past), but the proportions of cubes are different.

Does it scale responsively? Yes — set viewBox and CSS width: 100% on the <svg> and it scales perfectly to any container.

Which design tool is best for isometric art? Affinity Designer ships an isometric grid mode out of the box; Illustrator requires manual setup; Figma needs a plugin.

Can the SVG be edited in Illustrator? Absolutely — every line is a regular SVG element, so importing into Illustrator, Inkscape or Figma works one-to-one.