SVG Brick Pattern Generator

Brick wall SVG patterns: 7,000 years of architecture in one tile

The brick pattern is one of the oldest geometric motifs in human design. Sun-baked mud bricks appear in ancient Mesopotamia around 5000 BC, and the same offset-row arrangement we still use today — half-brick shift between courses — was already standard then because it spreads vertical load and stops cracks from running straight up. On the web, the same tile gives instant "loft", "industrial" or "rustic" character to a background.

Mathematically, a brick pattern is two staggered rows of rectangles. With brick width w and height h, the SVG tile is w × 2h and the second row is offset by w/2. Standard brick proportions are roughly 2:1 (length to height); Brazilian solid bricks come in 9×14×19 cm or 9×19×29 cm.

<pattern id="brick" width="80" height="40" patternUnits="userSpaceOnUse">
  <rect x="0"   y="0"  width="80" height="20" fill="#c44" stroke="#fff" stroke-width="2"/>
  <rect x="-40" y="20" width="80" height="20" fill="#c44" stroke="#fff" stroke-width="2"/>
  <rect x="40"  y="20" width="80" height="20" fill="#c44" stroke="#fff" stroke-width="2"/>
</pattern>

Brick bond types

• Running (stretcher) bond — every row offset by half a brick. The most common bond on the planet; clean, modern, structurally sound.
• Flemish bond — each row alternates a long side (stretcher) and a short side (header). Decorative, traditional European facades.
• English bond — rows alternate all-stretcher and all-header. Very strong, heavier visual rhythm.
• Stack bond — no offset at all, vertical joints aligned. Visually striking, structurally the weakest — used purely decoratively.
• Herringbone — bricks at 90° to each other; common on floors and modern accent walls.

Colour, mortar and texture

Three palettes cover most of the web design space: classic terracotta red (#b91c1c with a #fef2f2 mortar joint), white painted brick (#f5f5f4 brick, #d6d3d1 joint) and exposed concrete grey (#52525b brick, #27272a joint). Real walls have a mortar gap of about 10 mm, which on a 60 px brick maps to roughly a 2 px stroke — that is the default of this generator. For extra realism, overlay a faint noise filter via <filter><feTurbulence> or a low-opacity grain PNG.

CSS versus SVG

A brick wall is technically possible with a pair of repeating-linear-gradient() stacked together — one for horizontal mortar lines and one for offset verticals. It works, but the code is verbose, hard to recolour and breaks on Safari at sub-pixel sizes. SVG <pattern> with three <rect>s is shorter, themable through a single fill attribute, and tiles identically across browsers and DPRs.

FAQ

Which bond is best for a background? Running bond for almost any site — it is the most recognisable and reads cleanly at small scale. Stack bond looks modern but can feel too rigid; Flemish bond is for traditional, premium aesthetics.

What size should the bricks be? Scale to context. For a hero background, 60-80 px wide bricks feel right. For a UI element like a card header, 20-30 px keeps the texture readable without overpowering the type.

SVG or CSS? SVG. It is shorter, simpler to recolour and looks the same on every browser. CSS gradients work for a quick experiment but cost legibility once the tile is non-trivial.

Can I download the SVG? Yes — the Download button saves the tile as a standalone .svg file that you can drop into any project.