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.