SVG patterns

SVG <pattern> elements define a reusable tile that can be used as a fill for shapes. The pattern tile is defined once and referenced by ID, making it efficient for large backgrounds.

Using patterns in CSS

Export your pattern as an SVG file, then use it as a CSS background:

background-image: url('pattern.svg');
background-size: 20px 20px; /* tile size */

Alternatively, inline the SVG in HTML and reference the pattern with: fill="url(#pattern-id)".

Accessibility note

Pure decorative patterns should have aria-hidden="true" on the SVG element so screen readers skip them.

Pattern coordinate systems

The patternUnits attribute controls how the pattern tile is sized:

patternUnits="userSpaceOnUse": the tile dimensions are in the same coordinate system as the element being filled. A 20×20 tile stays 20 px regardless of the element's size. Best when you want a fixed pixel tile size.
patternUnits="objectBoundingBox": the tile dimensions are fractions of the element's bounding box (0 to 1). The pattern scales proportionally with the element. Best when you want the pattern density to stay visually consistent regardless of element size.

Animated patterns

SVG pattern tiles can contain animated child elements using the <animate> and <animateTransform> elements. For example, a rotating element inside a <pattern> creates a seamlessly tiling animated background - something CSS-only patterns cannot easily achieve. This makes SVG patterns a powerful option for animated hero sections and loading states.