SVG textures give every surface a material identity. Hatch and cross-hatch are composable repeating patterns with scale (fill vs fixed pixel) and density controls. Dot patterns tile on cream surfaces. Decorative elements — globe arcs, compass rose, starburst — add depth to hero blocks. The topo background traces real Lawrence, KS terrain from the Kansas River valley to Mt Oread.
Playground
Textures
Hatch
Parallel diagonal stripes — scale and density variants
Fill (scales with container)
Fixed (pixel-locked)
Fixed tight (for small elements)
Custom color (amber, fieldset default)
Cross-Hatch
Crossing diagonal stripes — scale variants
Fill (scales with container)
Fixed (pixel-locked)
Dot Pattern
For cream surfaces — four size variants
Small (default)
Medium
Large
XL
Layered Textures
Multiple textures compose via DOM stacking order
Hatch + dots
Navy surface
Cross-hatch + topo
Red surface
Hatch + globe arcs
Navy + decorative
Panel / Button Group Texture Slots
Override default amber hatch via :texture slot
Default (amber hatch)
Custom texture slot
Default texture
Cross-hatch override
Navy bg + dots
Globe Arcs
Decorative globe for navy hero surfaces
Compass Rose
Decorative compass — positioned in hero corners
Starburst
Decorative accent for red and navy tiles
Topo Mark Lines
Simplified contour lines for the logo mark
Topo Background
Full-page Lawrence, KS terrain — fixed behind all content