grid pattern for docs
A grid pattern is a pair of lines, one horizontal and one vertical, repeated in SVG inside a square tile; this generator uses a 48 by 48px tile with a 1px-thick stroke, a size that reads as a technical CAD ruler without looking like a printed spreadsheet sitting behind the text.
Because 48 is a multiple of 8, every cell of the visual grid lines up with three units of the spacing scale, so headings, paragraphs and code inherit visual alignment with no extra CSS effort.
Shrinking the tile from 48 to 24px doubles the number of visible lines per area, which helps when the grid works as an actual alignment guide for diagram elements, not just decorative texture.
A 96px tile, double the documentation default, spaces the lines far enough apart that a hero section with a large focused headline has no line crossing through the middle of its letters.
For simple geometry, usually yes: it scales without losing sharpness, stays editable and is often lightweight. For photographic textures or very dense noise, an optimized PNG/WebP may be more efficient.
48 is a multiple of 8, the spacing unit most design systems use as their base (8, 16, 24, 32, 48, 64), so the visual grid lands exactly on the same scale that already organizes margin, padding and line height across the surrounding layout.
Yes, especially at a smaller tile like 24px: in that case opacity rises a bit, up to 0.08 or 0.1, because the grid stops being background texture and starts working as an active visual reference for positioning diagram elements.
No, as long as the stroke is drawn only on each tile's top and left edges: that way, one tile's corner automatically becomes the next tile's corner in the repeat, and every line in the final mesh gets drawn exactly once, with no overlap that would visually thicken the stroke.
Because two continuous lines per cell cover more pixel area than a single small dot on the same tile, so for the final effect to read equally subtle, the grid needs a lower opacity, typically between 0.05 and 0.08 versus 0.08 to 0.12 for dots.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 128" role="img" aria-label="Pattern preview"><defs><pattern id="p" width="32" height="32" patternUnits="userSpaceOnUse"><circle cx="16" cy="16" r="2.8" fill="#3DDC97"/></pattern></defs><rect width="100%" height="100%" fill="#101412"/><rect width="100%" height="100%" fill="url(#p)"/></svg>The pattern is generated locally and does not use a backend.