GuillocheLines

Options

paper #fbfaf4

css colour

The paper the plate is printed on. Match it to your page background. `auto` takes it from the page, so the effect adopts whatever it is dropped onto.

ink #2f2b26

css colour

The engraving. A desaturated near-black reads as ink; pure black reads as a wireframe. A light-dark() pair picks by the ground it lands on.

accent #c44400

css colour

The second colour, printed over one band of the pattern the way a share certificate prints one guilloche in red over the rest in black. A light-dark() pair picks by the ground it lands on.

scale 1.9

0.2 to 3, good: 0.6 to 1.4

Size of the whole rosette. Below about 0.5 the lines are finer than the pixels and the plate turns grey.

pitch 10

4 to 80, good: 14 to 40

Lines per unit of radius. Higher is finer engraving, and past about 50 it stops resolving on anything but a retina screen.

lobes 7

2 to 24, good: 5 to 12

Lobes on the first rosette. Whole numbers only: a fractional lobe count gives a curve that never closes, and an open curve reads as a mistake rather than as engraving. The other two families are derived from this and kept coprime to it.

waves 9

4 to 80, good: 12 to 40

Spokes in the family that runs around the circle rather than out from it. This is what turns two ring families into woven guilloche instead of a moire.

depth 0.12

0 to 0.4, good: 0.04 to 0.14

How far each rosette's radius wobbles. Zero is concentric circles. Past about 0.2 the curves cross themselves and the weave becomes a tangle.

weight 0.18

0 to 1, good: 0.2 to 0.55

Weight of the engraved line. Heavy lines at a high pitch fill in solid, so raise one and lower the other.

accentBand 0.22

0 to 1.2, good: 0.1 to 0.5

Where the second colour sits, as a radius from the centre. Set it past the corner of the panel to switch the second colour off.

grain 0.28

0 to 1

Paper tooth. Static by design. Animated grain flickers, and a flicker this fine is what WCAG 2.3.1 exists to prevent.

period 36

4 to 180 s, good: 6 to 60

Seconds for one turn of the gears. The pattern is exactly periodic over this. Slow on purpose: a backdrop whose cycle you can follow is a backdrop competing with the page, and at a turn every few seconds the eye tracks the rosette instead of reading. 60 is better still and the only reason it is not the default is the preview video, which is fine lines at every scale and the worst thing there is to compress.

reducedMotionTime 5

0 to 180 s

The single frame shown when the user prefers reduced motion. Any time works: a still guilloche is an engraving, which is a finished thing to look at.

What it needs

Category

Backdrops, an effect

Dependencies

None at all

Browser

WEBGL2

Frame budget

~0.9 ms · 1 context

Pinned to

v0.13.0

• WebGL2 for gl_VertexID; there is no WebGL1 fallback and none is planned
• The line width is derived from the screen-space derivative of the field, so the engraving stays one pixel wide at any DPR instead of filling in at the centre
• Falls back to a still frame under prefers-reduced-motion, handled in the runtime
• One full-screen triangle and three line families. No noise, no textures, no render targets
• The cheapest effect in the library
• Dense line work is the hardest thing in this library for a video codec to encode, so its recording carries a per-item quality override. The effect itself is unaffected