BG Pattern - Square
A decorative concentric rotated-square SVG pattern that fades outward — useful as a background embellishment for hero sections, cards, and empty states.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
Basic
Place the component inside a relatively positioned container. It renders an inline SVG sized to the chosen size prop.
Background Pattern
Sizes
Three built-in sizes — sm (336x336), md (480x480), and lg (910x910, default).
sm
md
lg
Custom Color
The component inherits currentColor for its strokes. Override the color by passing a text color utility via class.
Custom Color
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "lg" | Controls the overall dimensions of the SVG pattern. |
class | HTMLAttributes["class"] | — | Extra classes forwarded to the <svg> element. Use text color utilities to tint the squares. |