Notes on creating patterns using SVG.

Definition

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.

Number of Tiles

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

import "./styles.css";

import "./styles.css";

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.

import "./styles.css";

import "./styles.css";

Misc.

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