Patterns

codepen practice page

the pattern element

A pattern is a design that is used repeatedly as a fill for another object. The object can be a simple shape element, or a complex group of shapes, lines and paths as in the example below. We'll do a quick overview of how it works before diving into the details.

creating the pattern design

The repeating design used as the basis for a pattern is defined in <defs> section.

First we'll create a simple design. We'll add a group tag with an id of "target" so that we can refer to and apply the design later.

This is what our design looks like:

creating the pattern tile

Next we create the pattern tile using the <pattern> element. There are a lot of attributes to this element (patternUnits, width, height, etc.) which we'll go over later, but for now you should notice the id, which we'll use to apply the pattern as a fill, and the <use> element using the graphic we created earlier.

Finally, the pattern tile is used as a fill by referencing its id.

fill="url(#tile)"

pattern element attributes

id: Used to identify the pattern so it can be used as a fill or stroke of an object.

width, height: The width and height are used to define the size of the pattern tile,

patternUnits: defines the coordinate system used for the pattern's width and height. There are two possible values:

1. userSpaceOnUse: the dimensions are based upon the viewbox coordinate space.
2. objectBoundingBox the width and height are expressed as a fraction of the bounding box of the object to which the pattern is applied.

patternContentUnits: similar to patternUnits, except it defines the units of measure used when setting the geometric values of the pattern content.

1. userSpaceOnUse: the pattern content uses the same coordinate system as the object being filled.
2. objectBoundingBox the pattern content's geometric attributes are defined as percentage values of the bounding box of the object being filled.

pattern units

Defines the unit of measure used when setting the geometric value of the pattern tile.

patternUnits - userSpaceOnUse

In this example we're using userSpaceOnUse as our pattern unit, so the pattern uses the same coordinate system as the rest of the SVG. Each tile is the same size as the graphic used in the tile. (50x50)

<pattern ... patternUnits="userSpaceOnUse"

Now lets keep everything the same, but change the width and height of the pattern to 100x100.

Let's change the width and height of the pattern tile again - this time to 25x25.

patternUnits - objectBoundingBox

When patternUnits is set to objectBoundingBox the tile width and height are defined as a percentage or fraction of the filled object’s bounding box. In this example, width and height of the tile are 20% of the width and height of the rectangle’s bounding box. So .2 x 500 = 100.

<pattern ... patternUnits="objectBoundingBox"

patternContentUnits

Similar to patternUnits, except it defines the units of measure used when setting the geometric values of the actual pattern content - the width, height, etc of the paths, circles, rects and other elements used in the pattern design itself.

patternContentUnits - userSpaceOnUse

The size values for the content that defines the pattern uses the same coordinate system as the element that uses the pattern.

patternContentUnits - objectBoundingBox

The size values for the content are defined as percentage values of the object bounding box. So if we want to re-create the same pattern as directly above, we need to set the radius, cx and cy values to .05

(The rectangle being filled by the pattern is 500x500. 500 x .05 = 25 )

Since the size of the pattern content is expressed as a percentage of the bounding box, it scales as the bounding box gets bigger or smaller.