Summary - Custom background pattern

Build a custom background pattern with Houdini.

How is a custom background pattern built?

A custom background pattern combines three Houdini pieces. First you register a typed variable with @property --cell-size; this enables transitions. Then a paint worklet defines the drawing through registerPaint('grid', class).

Finally in CSS you write background: paint(grid) and set the cell size with --cell-size. Together the pattern can be animated alongside the variable.

The three pieces together

When the three pieces come together the pattern can be animated. Once @property --cell-size is registered with syntax: '<length>', changing --cell-size makes the browser re-invoke the paint worklet.

Add transition: --cell-size 0.3s ease and the cell size grows smoothly. A single line of CSS becomes a smooth animation inside the worklet.

Exercise Write @property for --cell-size

Complete the CSS below. In @property --cell-size add syntax: '<length>', inherits: true and initial-value: 16px.

Show example solution

/* typed variable for cell size */
@property --cell-size {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

Exercise Use the grid pattern in CSS

Complete the CSS below. In .grid-bg add --cell-size: 24px, background: paint(grid) and transition: --cell-size 0.3s ease.

Show example solution

/* grid background pattern */
.grid-bg {
  --cell-size: 24px;
  background: paint(grid);
  transition: --cell-size 0.3s ease;
}

Test yourself

Match each piece to its role

@property --cell-size

Typed variable registration
registerPaint('grid')

Worklet drawing
background: paint(grid)

Usage in CSS
--cell-size: 16px

Data to the worklet
What does the paint worklet read in a custom pattern?
```
/* what does the worklet read? */
```
- The CSS variables declared via inputProperties
- Only the browser name
- The whole DOM tree
- The page URL
Show answer

The CSS variables declared via inputProperties — Correct. The worklet reads only the variables it declares through inputProperties.

Next lesson: Container-type in depth

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies