Grid & Blueprint Generator

Isometric Projection Geometry (30° Axonometric Drafting)

Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. Unlike perspective drawings where parallel lines converge at a vanishing point, isometric drawings maintain parallel lines, preserving accurate scale along all three Cartesian axes (X, Y, Z).

In an isometric grid, the horizontal coordinate axis is tilted at an exact angle of 30 degrees (π/6 radians). This creates equilateral triangular tessellations, allowing technical illustrators, game level designers, and iconographers to construct 3D forms with mathematically exact proportions.

Architectural Blueprint Subdivision Math

In classic cyan architectural blueprints, minor grid lines provide fine millimeter measurements while major grid lines delineate standard meter or foot increments. Our engine renders multi-pass vector paths: first drawing faint minor subdivision lines at 15% opacity, followed by bold major division lines at every 5th or 10th interval with elevated stroke width.

This hierarchical subdivision enables structural engineers and product designers to use generated canvas backgrounds directly as scale-accurate drafting paper.

// Rendering scale-accurate architectural blueprint grid with major/minor lines
export function drawBlueprintGrid(ctx: CanvasRenderingContext2D, width: number, height: number, cellSize = 30) {
  ctx.fillStyle = '#0f3156'; // Blueprint cyan-blue base
  ctx.fillRect(0, 0, width, height);

  ctx.lineWidth = 1;
  for (let x = 0; x < width; x += cellSize) {
    const isMajor = (x / cellSize) % 5 === 0;
    ctx.strokeStyle = isMajor ? 'rgba(125, 211, 252, 0.5)' : 'rgba(125, 211, 252, 0.18)';
    ctx.lineWidth = isMajor ? 1.5 : 0.75;
    ctx.beginPath();
    ctx.moveTo(x + 0.5, 0);
    ctx.lineTo(x + 0.5, height);
    ctx.stroke();
  }
}

Vector SVG Output for Infinite Resolution

Every grid generated in our studio can be exported as pure vector SVG using SVG <pattern> tags. This results in incredibly tiny file sizes (under 1 KB) while ensuring razor-sharp line rendering at any print dimension from architectural posters to billboard prints.