Diagonal Line Patterns

Eight diagonal line patterns at a mathematically exact 45 degrees, rendered live from seamless SVG tiles. Diagonal hatching is the texture of motion — it leans, so it reads as energy even when the palette is quiet. Fine pinstripes give sections a tailored feel; heavier stripes signal construction, caution, or playfulness depending on the colors. Each card copies as one CSS rule with the tile inlined as a data-URI, downloads as an editable SVG, or opens straight in the pattern generator.

The stripe angle is half the trick: 45 degrees tiles perfectly and feels deliberate, where near-45 angles shimmer with aliasing artifacts. These tiles overshoot their corners so the stripes flow through tile boundaries without a visible joint at any scale.

Use scale to set stripe rhythm and weight for the ink-to-background ratio. Pinstripe ratios — thin line, wide gap — layer politely under content; approach a 50/50 ratio only where the pattern IS the design, like a 404 page or an empty-state illustration.