Showroom · Make-of

How Rosette was made

An interactive Bengal-cat portrait with no image files anywhere — the cat is SVG, the coat is dealt by a seeded random generator, and every visitor gets a pattern of their own.

What it demonstrates

That generative art can carry character, not just texture. The page has one hero object — a drawn cat — and gives it life three ways: a coat that is provably unique per visit (the seed is displayed as a coat number and lives in the URL, so a coat can be shared), eyes that follow the pointer, and small honest behaviours — a slow blink, a tail flick, a purr you must ask for. The copy underneath keeps the breed facts real and says plainly that the cat is an illustration.

Techniques, honestly named

• Seeded coat generation — a mulberry32 PRNG keyed by the visible coat number; rosette sites are dart-thrown into weighted body regions and rejected if they break a minimum-distance rule, so the pattern never clumps.
• Two-toned rosettes — each mark is a warm irregular centre wrapped in two to four broken dark arcs, elongated along the local fur direction; a marble mode draws flowing two-tone ribbons instead, the way the real marble pattern flows.
• Hand-built SVG anatomy — layered paths for body, haunches, head and tail, sharing one user-space gradient so every part blends seamlessly; the tail rings are literally a dashed stroke.
• Pointer-tracked eyes — pupils translate inside clipped eye shapes, clamped to a small radius and eased frame-to-frame, with a subtle head turn on top.
• Blink without extra art — the eyeball group squashes on the Y axis, so the dark rim flattens into a closed-lid line; the tail flick is one CSS keyframe rotation from the tail base.
• Synthesized purr — Web Audio only: low-passed noise, amplitude- modulated at about 23 Hz (the range real cats purr in) under a slow breathing swell. Nothing plays before a press, and the same button is the stop control.
• Respectful fallbacks — prefers-reduced-motion renders a still portrait with no tracking; the animation loop and the purr pause when the tab is hidden; the portrait is a real button, so the blink works from the keyboard too.

Recreate it