About this set
Six SVG pattern backgrounds drawn for this set and inlined as data URIs. Topography is a field of nested contour rings placed so the tile repeats without a visible seam. Waves repeats two offset curves whose ends meet at the same slope. Circuit board has traces that leave one tile and enter the next at the same point, with pads, vias and a small chip. Hexagons is a honeycomb drawn from one cell and a connecting edge, Triangles is an isometric lattice, and Crosses places small plus signs on a 24 pixel grid. An SVG inside a data URI cannot read CSS variables, so each drawing is used as a mask on a ::before layer whose background colour is –bp-color. That makes the colour, the tile width (–bp-size, used as the mask size) and the strength (–bp-opacity) all themable from CSS, without editing the SVG. The drawings are a few hundred bytes each except the topography, which is about ten kilobytes. Use topography and waves for outdoor, travel and calm marketing pages, the circuit board for developer and hardware products, and the geometric three for app backgrounds and section dividers.
What’s included
- Original drawings: topography, waves, circuit board, hexagons, triangles, crosses
- Each tile repeats without seams
- SVG used as a mask, so --bp-color recolours it from CSS
- --bp-size scales the drawing, --bp-opacity sets its strength
- Plain CSS, Bootstrap 5 and Tailwind CSS 4 versions of the same design
Accessibility
The SVG patterns are CSS backgrounds rather than images in the page, so they are decorative and need no alt text. Name labels are opaque chips with text above 4.5:1 on every pattern. Nothing animates and there are no interactive controls.
Customise it
Change --bp-color for the line colour, --bp-bg for the ground, --bp-size for the tile width and --bp-opacity for strength. In Tailwind use the bp-topo, bp-waves, bp-circuit, bp-hex, bp-triangles and bp-crosses utilities with arbitrary properties such as [--bp-size:180px].
