Pixel brushes

The card is a sheet of three swatches, side by side on one off-white paper. Each is the same spiral, two and a bit turns, stamped with a different brush in its own ink: a pink ribbon of three-cell bars that follows the curve, a blue spray of single squares, and a green drift of squares thrown a full stamp off the line. They draw themselves in 180 ms apart, 900 ms each with an ease-out, and then the loop stops on a still sheet.

A brush is a stamp, one or more square cells in a -1 to 1 box each with its own alpha, plus five numbers. The engine walks the path by arc length and drops a stamp every spacing times the stamp size. Jitter moves the stamp across the path, which makes the line wander without breaking. Scatter throws it in a random direction, which breaks the line into a spray. Follow rotates the stamp with the path, so a bar reads as a ribbon instead of a grid the line passes through. Speed thinning shrinks the stamp as the path speeds up, which tapers the stroke. A hue drift can walk the ink's hue along the stroke.

Hard edges are the point, so every cell is a fillRect snapped to whole device pixels: sizes rounded, origins floored, drawn with the transform reset. The randomness is a hash of the stamp's index, not Math.random, so a brush on a path always makes the same mark and a resize never reshuffles it. The spiral's radius grows with t to the 0.72, so its turns do not crowd the centre, and its speed rises outward, so the speed-sensitive brushes taper toward the tail.

The playground keeps every number on a slider, lets you draw on the sheet with the pointer, and its Remix invents a brush that is in no list (a ring, a comb, a cross, a spatter, a nib or a weave) with an ink and paper pushed apart until they read.

• Walk the path by arc length and drop a stamp every max(1, size * spacing) device pixels.
• Offset each stamp perpendicular to travel by jitter and radially by scatter, both from a hash of the stamp index.
• Rotate the stamp's cells by the path angle times follow, and scale it by 1 - speedSize * speed * 0.55.
• Draw each cell with fillRect at a rounded size and floored origin in device pixels, with the transform reset.
• For the card, draw three spirals with an ease-out progress staggered per swatch, and stop the loop once the last has landed.
• Under reduced motion, draw the finished sheet once.

• SHOWN (rows, scatter-heavy, cluster): Which three brushes from BRUSHES the card shows.
• BRUSHES (twelve brushes, line to spray): The set: each a stamp and its five numbers.
• INKS, PAPER_BG (pink, blue, green on #fbf9f7): One ink per swatch and the shared paper.
• DRAW_MS, STAGGER_MS (900, 180): How long a swatch takes to draw, and the gap between starts.
• TWEAKS (the spray at size 0.075, spacing 0.4): Per-card overrides of a brush's numbers.