The SVG pattern defines diagonal lines at 40px intervals, rendered as paths with 1px stroke width. The SVG element scales to 200% of the container and centers itself to prevent edge artifacts. Lines use 20% opacity to stay subtle.

A linear mask fades the pattern from opaque at top and bottom edges to transparent in the center. This draws attention to the content area while maintaining visual interest at the edges. Dark mode adjusts the stroke color automatically through Tailwind classes.

Suits startup landing pages, agency portfolios, product marketing sites, and any layout where you want geometric texture without overwhelming the content.