SVG Diagonal Stripes Pattern Generator

Diagonal stripe SVG patterns

Diagonal stripes are one of the most loaded visual languages in design. The same geometry — parallel lines drawn at an angle, repeated at a fixed period — communicates wildly different things depending on the colours and the angle: hazard warning in yellow and black, luxury in pastel candy stripes, movement in narrow sports stripes. The math is trivial: a set of parallel lines at angle θ with a period d between them. The most common choice is 45° because it lines up cleanly with pixel grids and reads as the most "diagonal" of all diagonals.

SVG handles this in a few lines. Define a <pattern> with a single <rect> taking half the tile, and rotate the whole pattern with patternTransform="rotate(45)":

<pattern id="stripes" width="20" height="20"
         patternUnits="userSpaceOnUse"
         patternTransform="rotate(45)">
  <rect width="10" height="20" fill="#333"/>
</pattern>

That patternTransform rotation is the easiest way to get any diagonal angle — change 45 to 30, 60, 135 to tilt the stripes. The stripe width is the rectangle width; the gap is the tile width minus the rectangle width. Adding a second <rect> at offset gives alternating colour stripes (no gap).

Variants and tile control

• Thin pinstripes — 1-2 px line, 8-12 px gap; banker suit, formal feel.
• Thick stripes — equal width and gap; flag-like, sport jersey.
• Hazard stripes — yellow + black, 45°, equal widths — instantly reads as caution.
• Candy cane — red + white alternating, soft angle, holiday signalling.
• Asymmetric tri-colour — three rects of different widths, looks editorial.

Cultural and historical context

The yellow-and-black 45° diagonal stripe is recognised internationally as a hazard marker, a convention that emerged from US industrial safety and OSHA-era specifications in the early 1900s and is now codified in construction tape worldwide. In sports, diagonal stripes appear on a few iconic football kits — England and Welsh rugby use horizontal hoops, but Sunderland AFC in England, Independiente in Argentina and several South American clubs use bold diagonal sashes. Brazilian football uses diagonals very rarely; Botafogo's preto e branco runs vertically, not diagonal. The most ubiquitous diagonal stripes in commerce are probably Adidas' three stripes (1949), though those are horizontal on the shoe and angled only because the shoe is angled.

CSS-only equivalent and gotchas

You can build the same pattern with a single linear-gradient in CSS — background: repeating-linear-gradient(45deg, #333 0 10px, transparent 10px 20px) reproduces the SVG above. It works but is verbose for multi-colour variants. Watch out for optical illusions: dense diagonal stripes parallel to body text trigger the Hering illusion (the text looks bent). Avoid stripes as direct backgrounds for reading content — use a translucent overlay or restrict stripes to hero sections, dividers and decorative blocks. Also note that text on a striped background fails most contrast checks unless you put an opaque container behind it.

FAQ

Why is 45° the most common angle? It aligns with pixel grids without sub-pixel anti-aliasing artefacts, reads as the most "diagonal" without ambiguity, and matches the historical hazard-stripe convention used worldwide since OSHA standards in the early 1900s.

What is the CSS equivalent? A single repeating-linear-gradient(45deg, color1 0 10px, color2 10px 20px). Works fine for two colours; for three or more, SVG <pattern> stays cleaner.

Can I alternate colours? Yes — add a second <rect> with a different fill at the appropriate offset, or use a list of colour stops in the gradient.

Are stripes accessible behind text? Not directly. Put text inside a solid container above the striped background, or drop opacity of the stripes to 10-20%. Otherwise contrast will fail WCAG checks and the Hering illusion will fight your typography.