Illustration One Line

Illustration: One-line

A loose, energetic style: a figure in mid-action drawn as one long wandering black line, with colour laid underneath as offset patches, as if a second print colour slipped. It suits upbeat product moments (launches, sprints, flow, celebrations) where an interior scene would be too heavy. Use illustration-halftone-line for black open line with dot-screen tones and no colour. Use illustration-ink-sketch for a wobbly brush outline around a cute critter. Use illustration-two-colour-brush for thick brush outlines with solid black shapes and one mint ink.

Extracted from a set of 42 original design-and-coding cards in 14 styles; the three cards in examples/ are this style's shipped cards.

The look in one sentence

One continuous black line draws the whole figure, and flat coral, periwinkle and white patches sit behind it, deliberately knocked 2–6 px out of register.

Palette

Measured from the three examples (1x renders): paper 87–89% of the pixels, ink about 2%, white patches about 3%, periwinkle 2.3–3.7%, coral 0.8–2.8%.

• Masks use #fff and #000 inside <mask> only; they never show.
• Never: other colours, gradients, opacity, outlines on patches, grey, a second ink colour, black fills larger than a 1.9 px dot.
• Coral is skin and small accents; it never fills trousers or a whole top. Periwinkle never fills skin.

Line and fill

• One ink group: <g id="xx-ink" fill="none" stroke="#1d1b1a" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">. Every ink path inherits it.
• Weights at 480 wide: 2.3 for the figure line and props; 2.0–2.1 for a long motion path or clock hands; 1.8 for code glyphs (</>); coral stripe lines 1.9; coded colour dashes 2.3.
• The figure is ONE path (id="xx-figure") of smooth cubic segments, 1-decimal coordinates. Separate short strokes are allowed only for the eye, a hem or cuff, and props. Each prop is its own single wandering line too.
• Smoothness comes from the spline: every route point is [x, y] or [x, y, k] with tension k (1 smooth, 0.4–0.6 soft corner at elbows, knees and collars, 0 sharp for glyph corners).
• Colour is never bounded by the line. Patches are separate closed blobs drawn first, in <g id="xx-patches">, then stripes and dashes in <g id="xx-accents">, then the ink on top.
• Off-register: offset each patch 2–6 px from the shape it colours (T(pts, dx, dy)), and wobble its edge (wobble, amp 0.8–1.5 for hands and faces, 1.4–2.4 for limbs, 2.2–3 for big areas). Use a different integer seed per patch. Let patches fall short of one side and spill past the other.
• Stripes: 3–5 coral lines across a top, following the body's curve, stopping 2–4 px short of the contour, 1.9 wide. Sleeves get 1–2 short stripes.
• Masks: where the line passes behind something (an arm over a laptop, a fist round a baton, a motion path behind a juggled object), knock it out with a <mask> holding the front shape's silhouette in black. Add a black stroke of 2–10 px to open a gap. C.mask() builds it.

Characters

• Proportions: figures 190–240 px tall in action (53–67% of the card height). The head is 41–48 px tall, so about 1:5. Limbs are tubes: arms 18–21 px wide at the shoulder tapering to 8.6–9.5 at the wrist; legs 27–28 at the hip to 12–13.5 at the ankle.
• Head: a profile facing the direction of travel, 41–48 px tall. Route it in either direction. Up the throat into FACE_R (chin, lips, nose, brow as soft corners), over the crown and hair, down a ROUND back of the skull to the nape. Or the reverse, rev(FACE_R). The EAR_R C-loop is optional. Drop it if it doesn't read at 8x: an ear plus a flat hairline made a test head read as a helmet. The eye is a separate short closed-lid arc (EYE_R) and there is no mouth stroke (the profile carries the smile). A coral face patch covers the front half of the face, offset 1–2 px toward the profile, and leaves the back of the head bare paper.
• Hair: a periwinkle patch behind the hair outline (ponytail, bun loop, short crop), or curly hair drawn as trochoid loops (curls(), r 3–3.5, 4–5 loops) with no patch.
• Torso: there is no separate torso outline. The back contour, the arm sides and the belly are all parts of the route. A white top patch covers the chest, offset −4, −3, plus white sleeve patches built with blob() from the arm centreline.
• Limbs: build each with tube(centreline, widths) and route DOWN one side, round the hand or shoe, and back UP the other side. Put tension 0.4–0.6 on the elbow or knee point so it bends crisply. Keep a gripping wrist 45–60 px from its shoulder: a handle 48 px from the shoulder folded a test arm into a chicken wing (forearm 15 px, upper arm 33).
• Joints with hands and shoes: check where a limb side meets a placed shape at 8x. If the shape's first point sits behind the limb edge, the line hooks back on itself. Drop that point (shape.slice(1)) or shift the shape 3–4 px.
• Sitting astride or on a prop (a rocket, a stool, a chair): draw only the near leg, in front of the prop, and mask the prop's line with the figure's own route used as a silhouette (C.mask('m-rider', [[route, 5]])). For that, start and end the route at the same place, such as the heel.
• Hands are small loose loops, 19–27 px long (local shapes × 1.1–1.3), with a coral patch behind, offset 2–3 px. Shapes in the toolkit: HAND.mitten (swinging, thumb notch), HAND.fist (round a handle, knuckle bumps), HAND.tray (open palm carrying something), HAND.open (catching, thumb hooked out), spreadHand() (waving, four separate finger loops and a thumb), CLAMP (fist from the side gripping an edge). Never a plain oval.
• Handedness: decide LEFT or RIGHT, PALM or BACK and the finger direction with the table in references/craft.md, then flip the shape (place(..., flip)) so its thumb lobe lands on that side. The comment above each shape in scripts/oneline.mjs says which side its thumb is on.
• Feet: SHOE loops, 30–35 px long (× 1.25–1.3), with a white patch, offset 3–4 px. A small heel loop is allowed on one shoe.
• Loops: 2–4 cursive loops per figure, radius 3–5, at a waistband, a heel, a knee, a bun or the end of a ponytail (loopAt(), cornerLoop()). More reads as scribble. A loop in the middle of a leg reads as a mistake.
• Poses: big and diagonal, never standing still. Leaping between two objects, sprinting with the body pitched 11° forward, balancing on one leg while juggling. Lean the upper body by rotating its points about the hips (rot()) before routing.

Decor and props

• 1–3 context props, each one wandering line plus one offset patch: braces { }, a laptop with </>, a stopwatch, a coffee cup, a bug, a sun drawn as a loading ring. Props tie into the motion: a squiggle trails into a stopwatch, one looping path threads the juggled objects.
• Motion: 3 parallel speed strokes behind the figure (26–52 px long, 13–16 apart), or a squiggle trail with one loop.
• Ground: no ground plane. Use a short squiggle with a loop under the planted foot (90–110 px wide, 1 px under the sole) with a white or periwinkle patch, or nothing when the figure is airborne.
• Code: </> glyphs in 1.8 px ink on a screen or baton, and "code" as rows of coral and periwinkle squiggle dashes (squig(), 2.3 px).
• Never: text, UI panels, sparkles, confetti, outlined boxes, a horizon line, shadows.

Composition

• Card: <rect id="xx-paper" x="0" y="0" width="480" height="360" fill="#ece7da"/> first. Then <defs> (masks), patches, accents, ink.
• The whole drawing spans about 245–377 px wide and 240–284 px tall, centred. Keep 30–40 px clear at every edge (top ≥ 36).
• The figure carries the card: 190–240 px tall, placed so its direction of travel has more room ahead than behind. Props sit in the open space it moves toward or past.
• Density: sparse. Paper 86–89% of the pixels; about 12–17 patches and 15–40 ink paths in total.
• A big prop (rocket, board) gets a patch covering 60–75% of it, offset 4–6 px. A patch filling the whole prop reads as a solid white shape and outweighs the figure. Keep the figure 190 px or taller next to a big prop: scale the upper body about the hip if it looks small.
• Build in a local frame and map it to the card with one function: makeCard('sd-', { map: pts => … }) applies it to every line, patch, accent, mask and dot (scale 1.05–1.1 about a centre, plus a shift). To face the other way, mirror x in the map (map: pts => mirrorX(pts, 240)), and draw </> glyphs and any lettering with C.raw.line(...), which skips the map, so they don't mirror.

Techniques

1. The toolkit. scripts/oneline.mjs (no dependencies, seeded) holds the curve maths and the card assembly: smooth, tube, blob, wobble, place, T, rev, rot, lowest, curls, squig, loopAt, cornerLoop, arc, the local shapes (HAND.*, spreadHand(), CLAMP, SHOE, FACE_R, EYE_R, EAR_R) and makeCard(prefix, { map }) with line, accent, patch, mask, dot (all mapped), raw.* (the same, unmapped), dots (debug) and svg(debug, ariaLabel). Patches and lines share one id namespace, so name patches after their colour (porthole-peri, shoe-white): a test card failed lint with two porthole ids. Run node scripts/oneline.mjs --demo /abs/work/demo.svg from the skill folder (write it into your work folder, not the skill) and render it: an arm with a mitten, a leg with a shoe on a ground squiggle, a profile head, patches, a stripe and code dashes.

2. A limb route. Down the R side, round the hand, back up the L side:

import { makeCard, tube, blob, place, rev, T, ang, HAND, PERI, WHITE, CORAL } from '/abs/path/to/illustration-one-line/scripts/oneline.mjs';
const C = makeCard('sd-');
const arm = [[150, 120], [170, 132], [190, 146, 0.5], [212, 136], [232, 124]];   // shoulder, elbow (k 0.5), wrist
const W = [18, 16, 13.5, 11, 9], a = tube(arm, W);
const hand = place(HAND.mitten, arm[4], ang(arm[3], arm[4]), 1.2);           // +y wrist corner first
C.line('arm', [...a.R, ...hand, ...rev(a.L)]);                               // in a figure, splice this into the one route
C.patch('sleeve', T(blob(arm.slice(0, 3), W.slice(0, 3), 1.05), 3, -3), WHITE, 1.4, 4);
C.patch('hand', T(place([[0, -5], [12, -5], [17, 0], [12, 7], [2, 6]], arm[4], ang(arm[3], arm[4]), 1.2), 2, -3), CORAL, 0.8, 5);

Local shapes run from their +y wrist corner, round the tip, to the −y corner. Going down a limb's L side instead, use rev(shape) or flip = true.

3. Knock-out masks. const m = C.mask('m-arm', [[armSilhouettePts, 2]]); C.line('laptop', lapPts, m); hides the laptop's line under the arm. For a path that threads several objects, pass each object's silhouette with stroke 9–10 so the path stops short of them with a gap.

4. Ground the planted foot. const sole = lowest(route); then draw the squiggle at sole[1] + 1.1 with T(pts, sole[0], sole[1] + 1.1). A foot meant to stand must sit on it, not float above.

5. A whole-figure route order (the sprinter in examples/hackathon-sprint.svg, authored facing right). Every contour is visited once: ground squiggle behind → planted shoe top → front of the trailing leg up → crotch → lead leg underside → lead shoe → shin front → knee → thigh top into the belly → far arm underside → fist → far arm top → shoulder → short neck → FACE_R → crown → ponytail → back of the skull → ear → nape → near arm top → mitten → near arm underside → armpit → back → waistband loop → seat → back of the trailing leg → heel loop → sole → toe → ground squiggle ahead. A seated rider runs heel → calf → thigh underside → seat → back → raised arm → hand → nape → skull → bun loop → rev(FACE_R) → throat → near arm → fist → belly → thigh top → shin → shoe → back to the heel.

6. Patch recipe (offsets T(dx, dy), wobble amp, from the examples' generators). Top: the chest outline, (−4, −3), amp 2.4–2.6. Sleeves: blob(arm.slice(0, 3), W, 0.95–1.05), (±2–3, −3), amp 1.4–1.6. Trousers: blob(leg, W, 1.0), (5, 3), amp 2.2–2.4. Face: head-local [[6,-12],[16,-8],[22,2],[19,13],[9,15],[5,2]], (2, −1), amp 1.1–1.5. Hair: (−3, −2), amp 1.2–1.6. Hands: a 5–6 point blob of the hand, (2–3, ±2–3), amp 0.8–1.2. Shoes: [[-6,-2],[10,-3],[22,3],[22,10],[4,11],[-7,8]] through the shoe's own place(), (3–4, 2–3), amp 1.2. Props: (3–5, ±3), amp 1–1.8. Every seed different.