Illustration Ink Sketch

Techniques

scripts/ink-kit.mjs is the seeded brush library the three examples were generated with: run with it in place of the original, the Merge Conflict and Hello World generators reproduce every mark of the shipped cards exactly (the only diff is a stray text node the old file writer left in <defs>). Every mark takes a string key with its own random stream, so editing or adding one mark never reshuffles the rest; change a key to re-roll a single mark.

// card.mjs, next to a copy of ink-kit.mjs
import * as K from './ink-kit.mjs';
const { PAL, OUT } = K;
K.setPrefix('xx-');                                        // every id: filters and clip paths
K.grassPatch('grass', { x0: 60, x1: 420, top: 276, bot: 320 });
K.hatch('cast', K.arc(240, 286, 70, 6, 0, 360, 10), { ang: -58, sp: 3, w: 1.0, inset: 1.2, over: 0.4, op: 0.9 });
const ctrl = [];                                          // a round body: control points
for (let a = 0; a < 360; a += 30) ctrl.push([240 + 70 * Math.cos(a * K.deg), 220 + 62 * Math.sin(a * K.deg)]);
const loop = K.fillShape('body', ctrl, PAL.red.c, { off: [-3, 2], j: 1.4 });   // slipped fill
K.mottle(loop, PAL.red.d, 0.46);
K.clipOpen(loop);                                         // shading stays inside
K.stroke('streak', K.arc(240, 220, 60, 54, -10, 120, 6), { w: 13, t0: 20, t1: 25, wob: 1.5 }, PAL.red.d, 0.45);
K.stroke('gloss', K.arc(240, 220, 52, 48, 198, 236, 4), { w: 6, t0: 8, t1: 12 }, '#ffffff', 0.95);
K.clipClose();
const dl = K.resample(K.catmull(ctrl, true, 10), 1);      // outline in two strokes: gap top-left, overshoot
const o1 = K.stroke('o1', K.loopSlice(dl, 0.62, 1.18), { ...OUT([240, 220]), dense: true, t0: 12, t1: 10 });
K.stroke('o2', K.ext(K.loopSlice(dl, 0.2, 0.58), 3), { ...OUT([240, 220]), dense: true, t0: 8, t1: 6 });
K.hairs('hairs', o1.C, 4, { c: [240, 220] });
K.eye('eyeL', [216, 172], 21, [223, 176], 10.5);
K.eye('eyeR', [262, 168], 23, [269, 173], 11.5);
K.blush('blL', 206, 222); K.blush('blR', 280, 218);
[[96, 120, 1.5], [400, 96, 1.2], [420, 230, 1.1]].forEach((p, i) => K.fleck('fk' + i, ...p));
K.svgOut(new URL('./card.svg', import.meta.url).pathname, { label: 'Title, Ink sketch style' });   // next to card.mjs

Parts in the kit: stroke (the brush), OUT(c) (outline preset), hatch, fillShape, mottle, clipOpen/clipClose, hairs, fleck, dry, eye (with lid), tube plus across/acrossLine, shadeTube (fill, mottle, streak, gloss and rib for a limb or body), limbOutline (inks only the parts of a limb outside the body), hand, grassPatch, blade/tuft, blush, sweatDrop, codeSticker, paperScrap (torn note; returns T(x, y) for what you write on it), fillRing (a wheel or donut face-on: even-odd fill plus mottle), arc, loopSlice, ext, runsOutside, setWScale, svgOut.

A symbol drawn as one brush stroke, e.g. the infinity sign (a lemniscate, 26 px wide):

const inf = []; for (let t = 0; t <= 2 * Math.PI + 0.35; t += 0.07) { const s = Math.sin(t), c = Math.cos(t), d = 1 + s * s; inf.push([x + 13 * c / d, y + 13 * s * c / d]); }
K.stroke('inf', inf, { w: 3, t0: 3, t1: 5, nib: 0.45, press: 0.3, pf: 8 });

node scripts/ink-kit.mjs --demo $W/demo.svg writes a demo card and prints wrote <path> 203.5KB 316 elements: a red googly-eyed blob waving a 3-finger hand on a grass patch, with hatching, a code sticker, a sweat drop and flecks. It lints clean with --prefix ikd-.

Failure modes

• Clip-art line. Uniform-width strokes or SVG stroke attributes read as vector. Every line is a brush polygon with taper and pressure.
• Sealed outlines. One closed loop round a shape looks traced. Break each outline into 3 to 6 strokes with one gap on the lit side and one overshoot.
• Fill locked inside the line. It reads as colouring-book vector. Slip each fill 2 to 3.6 px, a different direction per shape.
• Flat colour. A fill with no mottle, streak or gloss looks printed. Every fill gets mottle plus at least one dark streak and one gloss swipe on round forms.
• Solid black shadow. Hatch it; fade the hatch density toward the light with keep.
• Dead googly eyes. Centred pupils or a missing specular stare blankly. Offset pupils 4 to 10 px toward the action; always two white dots.
• Hair everywhere. More than 5 hairs per stroke turns the line furry. 2 to 5, on the shadow side.
• Floating subject. No hatched contact ellipse and no dark base streak, and the critter hovers over the grass.
• Line weights drift in a scaled group. Forgetting setWScale(1/s) makes every line 12% too thick.
• Everything reshuffles after one edit. Reusing or renumbering keys re-rolls marks; give each mark a stable, unique key.
• Two cards on one page share a filter. Call setPrefix with a unique prefix per card; lint with --prefix.
• Typeset text. A font in a bubble breaks the hand. Letter it with brush strokes, or say it with marks (tally strokes, chevrons, a symbol) when the glyphs would take longer than the joke.
• Face jammed against a prop. In testing, a hamster's nose, mouth and paws merged into a wheel rim. Keep 25 px clear round the face and never end a limb at the mouth.
• Marks off the paper. Tally dots spilled past a scrap's torn edge and read as stray ink. Keep marks 4 px inside their paper.
• A floating sign. A note hanging in the air beside the subject reads as a mistake; plant it on a stake with a hatched contact.

Examples

• slow-build.svg (Slow Build): a sweating snail on a progress bar at 27%, its shell a spiral loading spinner with a hatched comet sweep; shows eyestalks, a code sticker, the grass patch, hand-lettered %, the soft contact shadow.
• merge-conflict.svg (Merge Conflict): a red and a teal worm butt heads where their branch lines meet; shows tube bodies with segment rings, grumpy lids, gritted teeth and a pout, commit dots, a spark burst, an anger mark, a flung <<<< scrap.
• hello-world.svg (Hello World): a potted cactus on a desk waves and says "hello, world" beside a coffee mug; shows a 3-finger waving hand with correct thumb, an arm resting over the pot rim, ribs with spine ticks, wood grain, steam curls, hand lettering in a speech bubble.

Workflow

Run from this skill folder. render.mjs needs playwright-core (or playwright) installed here, in the current folder or globally, plus a Chromium.

1. Brief. Name the subject and the metaphor: which critter, and which part of its body carries the idea. Write down the one expression (eyes, mouth, marks) that sells it at 480 px.
2. Hero and pose. Sketch the silhouette on paper or in comments: spine, eye positions, ground line. For every hand, write down LEFT/RIGHT and PALM/BACK (craft.md).
3. Set up: W=/tmp/ink-card; mkdir -p $W; cp scripts/ink-kit.mjs $W/, then write $W/card.mjs from the Techniques skeleton with a unique prefix.
4. Block: ground, body fills and eyes only. Render and check size, placement and the 1x read.
5. Draw: shading (mottle, streaks, hatching, gloss), outlines in separate strokes, hairs, face, props, lettering, flecks.
6. Render: node $W/card.mjs && node scripts/render.mjs $W/card.svg $W/card.png (card.mjs writes card.svg next to itself).
7. Sheet: node scripts/render.mjs --sheet $W/sheet.png examples/*.svg $W/card.svg. Ask "same hand, same set?"
8. Zoom eyes, hands, contacts and lettering at 6 to 8x: node scripts/render.mjs $W/card.svg $W/eyes.png --zoom x,y,w,h --scale 8.
9. Critique on the five criteria in references/craft.md and the Verify list; fix by editing the generator (never the SVG); repeat. Expect three or four rounds.
10. Lint: node scripts/lint.mjs $W/card.svg --prefix xx- --palette style.json. Fix every ERROR; each WARN colour must be a deliberate one-off.

Verify

• No stroke= attribute anywhere; every line is a filled brush polygon in #1d1a18.
• Outlines swell and taper (thin about 1 px, thick about 4.4 px) and each shape's outline has a gap and an overshoot.
• Every fill visibly slips past its line by 2 to 3.6 px.
• Every fill carries mottle; round forms have a dark streak and a white gloss swipe.
• Shadows and dark areas are hatched at -48 to -58 deg, spacing 2 to 3.2; no solid black areas.
• Googly eyes 40 to 55 px across, pupils offset toward the action, two speculars each, shade crescent inside.
• 2 to 5 hairs per outline stroke; 9 to 11 flecks in the margins.
• The subject rests on a grass patch or desk with a hatched contact shadow; nothing floats by accident.
• Two colour families on the subject, green or wood for the ground, palette hexes only.
• The whole card is wrapped in the prefixed rough filter; ids all carry the prefix.
• Lettering is brush-drawn, not a font.
• The metaphor reads at 1x without the title.