Clarinet, Vector Illustration
An in-house drawing of a B-flat clarinet. Body, keywork and every tone hole are separate vector shapes, so it recolours per client and animates on the page rather than being pasted onto it.
Client Profile
Fugue Lab
Project Summary
Drawn by Danielle Dinstman for Fugue Lab, in Illustrator, at the fidelity a player would recognise: the register key, the pinky cluster, the bell ring. Because it stayed a vector rather than becoming a PNG, the same file is a faint ebony-and-brass watermark on one client site and a full-colour illustration here, and it draws itself on as a page scrolls.
Objectives
- One instrument drawing good enough to stand as artwork, not as a stock silhouette
- Recolourable per client, so a site with its own palette does not get ours
- Usable as motion, not only as a picture
What We Implemented
- 87 shapes kept separate (body, keywork, ligature, tone holes) rather than flattened to one outline
- The four Illustrator classes became four colour roles a site maps to its own tokens
- Every shape normalised to a single path length, so one rule draws all 87 in sequence without measuring them
- Assembly motion by joint: mouthpiece, barrel, upper and lower joints and bell telescope together as the section scrolls
- Ships assembled for anyone on reduced motion or with scripting off, because the scroll only ever takes it away from finished
Results
- In use on the Samuel Sparrow site as the About page watermark
- A house asset now, reusable on any clarinet or woodwind client without a new drawing
- 10.8 kB gzipped, at any size, with no image request
