A checkered pattern.

SVG Pattern

Planted

Status: seed

SVG elements (such as <rect> or <circle>) can be defined as children of the <pattern> element. Together, these children make a tile. The pattern element's id can be used as the fill of an element, which will repeat the tile until the element is completely covered.

A checkered pattern with an outline around each pattern tile.

Number of Tiles

The width & height values of a <pattern> determines how many tiles of that pattern are rendered.

localhost:3000

import "./styles.css";
import "./styles.css";
A pattern of triangle (some are faded).

patternUnits

A pattern attribute that indicates which coordinate system to use for the <pattern> element. Value can be:

  • objectBoundingBox (default): the coordinate system defined on the pattern element.
  • userSpaceOnUse: the user coordinate system (the coordinate system of the svg element using the pattern). This is like rendering the pattern in the background of the <svg>. It is hidden & only parts of it are exposed by shapes that use the pattern.

Below is an example using userSpaceOnUse. Change the highlighted x & y values to move bottom square, showing how the pattern remains consistent with the other shapes.

localhost:3000

import "./styles.css";
import "./styles.css";
A junk yard planet.

Misc.

  • patternContentUnits has no effect if viewBox is specified on the <pattern> element.
  • to do: patternTransform
  • to do: preserveAspectRatio