Pattern Kit Gallery Block for React

The rule for the pattern you chose, as it is shown: a .surface class with an --ink variable (the foreground mixed to your contrast), the gradient layers, the positions and the tile size at your scale. Paste it and the surface renders the same, in any project that has a --foreground colour; swap the variable for a fixed colour if it does not.

The strength of the ink, from 10 to 60 per cent of the foreground over transparent. It is not a measured contrast ratio, so check text laid over a surface yourself.

The size of one tile in pixels, from 12 to 64. Repeating gradients (stripes, lines, hatch, rings) use it for their spacing, and the tiled ones (dots, grid, checks and the rest) use it as their background size.

Tab visits the Scale slider, the Contrast slider, then each pattern cell and the Copy button. The arrow keys move a slider by a step (Home and End go to its ends). Enter or Space chooses a cell. The chosen cell has a heavier ring and an underline, so it does not rely on colour.

The header and the sliders come first, then the cells in three columns, then the rule, so you can see the surfaces change as you drag. The page never scrolls sideways.

Add an entry to the PATTERNS list: an id, a label, a function from the tile size to its gradient layers (each with a position) and a function for the background-size. The cell, the rule and the copied text all come from that one entry.