---

name: illustration-halftone-line description: Draws hand-authored SVG spot illustrations in a halftone line style for design and coding scenes. Identifying traits are a confident black line with a slight hand wobble and contours left open, grey tones made only of fine halftone dots clipped to shapes, a few solid black masses (hair, leaves, a bag, a black tee), warm off-white paper and no colour at all. Covers the two-ink palette, line weights, the open-contour and stipple techniques, a seeded compiler that turns tone tags into dot fills, rubbery long-limbed characters and expressive hands, doodles, floor pools and a render-and-critique loop. Use when someone asks for halftone, stipple, dotted, risograph-like, newsprint, black-and-white, monochrome line, editorial line or zine-style illustrations, or for empty states, onboarding, 404 pages, blog headers, feature spots and marketing cards in that look.

Illustration: Halftone line

An editorial black-and-white style: one black ink on warm paper, figures drawn with a confident, slightly wobbly line that stops short instead of closing, and every grey made of printed-looking dots. It suits calm, human product moments: collaboration, reviews, commutes, focus time.

Boundary: for a single continuous line with off-register colour patches use illustration-one-line; for thick brush outlines with a second flat ink use illustration-two-colour-brush; for thin indigo interiors with sparse colour accents use illustration-line-interior. If the brief wants any colour, this is the wrong skill.

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

Black line and black dots on warm paper, nothing else: every grey is a field of jittered halftone dots whose size tracks the tone, and the line around it is left open.

Palette

| Role | Hex | Where it goes | |---|---|---| | Paper | #f4f1ea | the full-bleed card rect, and the fill of every shape that must hide what is behind it | | Ink | #111111 (written #111) | every line, every halftone dot, every solid black mass |

• Two colours, no exceptions: no greys, no opacity, no gradients, no colour accents. A grey comes only from dots.
• Paper-coloured strokes (stroke="#f4f1ea", 1.2–1.5) are drawn inside solid black shapes for hair highlights, leaf veins, trouser creases and bag seams.
• Most of the card is open paper: measured ink cover (lines, dots and blacks together) is 12–14% of the card.

Line and fill

Widths at 480 wide. The art group carries stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"; parts override it.

| Element | Width | |---|---| | Figures, hands' outer contour, furniture, shoes' outline | 2.0 (1.9–2.1) | | Screens' inner frame, window glass, plants, small props | 1.6–1.7 | | Finger and thumb creases, folds, cuffs, hems, hood seams | 1.3–1.6 | | Keyboard keys, nail ticks, text lines on paper props | 1.1–1.3 | | Squiggles, braces, radiating ticks | 2.0–2.3 |

• Open contours. An outline is a separate open path, not the fill's stroke. Leave 1–3 gaps of 4–14 units per object, mostly at corners and where one line would meet another, and stop lines 2–6 units short of the line they would hit. Example from the shipped train window: M366 74 H410 C420 74 428 82 428 92 V138 M426 160 C424 168 418 174 410 174 H318 M300 174 H166 … (two gaps on one frame).
• Paper fills hide, they do not outline. Each shape that overlaps something behind it gets a paper fill with stroke="none", drawn before its dots and its open outline.
• Hand wobble. One filter on the whole art group, nowhere else: a low-frequency warp of 2.3 plus a fine edge roughening of 0.8. scripts/halftone.mjs writes it (<filter id="xx-wob">); give each card its own --seed.
• Tones are dots. A jittered grid at pitch 2.58 with dot area proportional to tone: flat 0.19 (light, dot r ≈ 0.6) for clothes, cushions, light props and the outer floor pool; flat 0.36–0.38 (mid, r ≈ 0.85) for hair blobs, shadow sides, the far limb, the core of a floor pool. Graded tones (lin, rad) shade rounded forms from 0.08 to 0.36.
• Solid black for 3–5 masses per card: hair, a plant's leaves, a bag, a black tee or trousers, a laptop's or monitor's dark edge, shoe soles, a check mark.

Characters

• Rubbery and long-limbed. Head with hair 40–44 px tall; a standing figure is 230–250 px (5.5–6 heads, 65–70% of the card height); a seated figure's head top sits about 70 px from the top of the card.
• Heads in profile or near-profile. Build each in a local frame <g transform="translate(cx cy) rotate(a)">: a paper face shape with a pointed nose wedge, an open outline from the brow over the nose and chin to the jaw, the back hidden under the hair. From the shipped critic's head: face M-16 18 C-26 0 -20 -24 4 -26 C20 -26 23 -10 22 -1 L31 9 Q29 11.5 23 12 C24 18 23 24 17 28 C11 32 0 31 -8 24 Z. ${H.head(x, y, rot, dir, hair, { back, eye, smile })} draws exactly this head, facing right (dir 1) or left (−1); its local face spans about −26…31 by −26…32, so (x, y) is roughly the middle of the face. For a face turned left, a negative rot tips it down.
• Face marks: an eye dot r 1.8–1.9 (or a closed-eye arc for calm), a short brow arc at 1.6–1.7, a small smile arc at 1.7–1.8, an ear as a C with an inner curl at 1.6, round glasses as one outline lens in profile with an arm to the ear (H.hair.glasses()). No blush, no pupils, no lashes.
• Hair: a solid black blob with one 1.3 paper highlight stroke, or a dotted blob (0.38 plus an outline with two 1.3 strand lines); buns are black circles, ponytails black teardrops, beanies dotted with a ribbed paper band. Presets from the shipped cards, in the head's frame: H.hair.curly(t) (dotted crop with a front curl; 'flat 0.3' reads as grey), H.hair.bun(), H.hair.ponytail(), H.hair.long (pass .back as the head's back option and .front as its hair) and H.hair.glasses(). Hair needs a broken silhouette (a bun, a tail, curls or a fringe notch): a smooth cap with a straight hairline reads as a helmet.
• Necks are a paper quad with one or two 1.5 lines. Shoulders slope; torsos are soft sacks, not boxes.
• Clothing: light dots on the near sleeve and body, mid dots on the shadow side and the far limb, or a solid black garment with paper crease lines. Ribbed hems and cuffs are rows of 1.3 ticks. ${H.limb([[x,y] shoulder, elbow, wrist], [halfWidths], tone)} builds a sleeve or trouser leg as the toned-shape triple with open ends (tone 'flat 0.19', '' for bare skin, 'black' for a solid garment); two black legs need a 1.4 paper crease line between them.
• Hands are large and expressive, about 0.8 of the head height from wrist to fingertip. Follow references/craft.md for construction and handedness. In this style each finger and the thumb is its own paper-filled shape; the outer contour is an open line at 2.0; creases and nail ticks are 1.2–1.6; fingers fan with small gaps; a cuff line crosses the wrist. ${H.hand(x, y, rot, sc, thumb)} in scripts/halftone.mjs draws the typing or resting hand used on the shipped cards: wrist at (x, y), fingers along local +x bending onto a surface toward +y, the index on the −y edge and the thumb beside it when thumb is true. For fingers pointing left, mirror it: <g transform="translate(x y) scale(-1 1)">${H.hand(0, 0, rot, sc, false)}</g>. Pointing and gripping hands are drawn by hand in the same manner (back of hand, an extended index, curled fingers as stacked loops with 1.3 creases, the thumb as its own shape).
• Feet: simple sneakers with a paper upper, a black sole slab and 1.3–1.6 lace ticks (${H.shoe(x, y, dir, sc)}, sc ≈ 0.6, (x, y) = heel bottom, the ankle lands at x + 8·dir, y − 14), resting on the floor stroke. Set a figure's two heels at least 26 apart: two shoes overlapping by more than a toe read as one double shoe.
• Poses that work: leaning over a table with one knee bent and one arm braced behind the back; seated with a laptop on a raised thigh, back against a partition; perched on a stool typing with the far leg tucked; standing in contrapposto, chin resting on one hand, the other holding a cup at the hip; two people seated either side of a small table, the explainer leaning in and pointing. Never bolt upright with both arms hanging. To lean a finished torso, wrap torso, neck and head in rotate(−8 hipX hipY) and re-aim the arm's shoulder point to match.

Decor and props

• Doodles, 2–4 per card, floating in open paper in the upper third: a curly squiggle with three loops (2.3), three radiating ticks above a head for a thought or surprise (1.8–2.0), curly braces { } (2.0), a solid black check mark, a chat bubble with three black dots (r 3.2), a document or image card with lines.
• Props are line drawings with paper fills: desks and tables with open legs, stools, benches, a drafting table, monitors and laptops (one dark edge solid black), screens carrying </>, text lines at 1.3–1.7 and a cursor, mugs and takeaway cups (dotted body or a black band), a plant with solid black leaves and paper veins, a black tote.
• Floor: never a full line. Short strokes at 1.9–2.0 only under what stands there, plus a dotted pool under every foot, leg or base: a light ellipse (0.19, ry 5.6) with a darker core (0.36, 58% of the width, ry 3.4). ${H.pool(cx, cy, rx)} writes both.
• Never: colour, grey fills, outlined closed boxes everywhere, drop shadows, sparkles, hatching (tone is dots, not lines), text other than </> and code glyphs.

Composition

• Paper rect first, before <defs>: <rect id="xx-paper" width="480" height="360" fill="#f4f1ea"/>, square, no rx.
• Ink bounding box 78–82% of the card width and 73–80% of its height; margins 37–55 px (75–110 px on the 2x render).
• Draw at 1:1 inside <g id="xx-frame" transform="translate(dx dy)"> with a small nudge to centre (the shipped cards use ±4), or draw large and scale the frame by 0.86 as the first card does. Keep the 2.0 line after any scale.
• One or two figures interacting with one piece of furniture or one device; the focal point is the hands on that object. Doodles go in the open paper above, never on top of a figure.
• Balance the solid blacks: spread 3–5 black masses so no side of the card is all grey dots.
• The floor sits at y 305–322; everything that stands touches it through a pool.

Techniques

1. Write a source, compile it. Author card.src.svg with @P@ for the id prefix, <!--DEFS--> inside <defs>, <stip> tags for tones and ${…} expressions, then: node scripts/halftone.mjs card.src.svg card.svg --prefix oh- --seed 41 It writes the wobble filter, one clip path per stipple, the dots, and fails if any id lacks the prefix. node scripts/halftone.mjs demo /tmp/halftone-demo.svg writes the tone swatches (put it anywhere outside the skill folder). Every ${…} is JavaScript (nested braces and object arguments are fine) with the built-in helpers H.pool, H.E, H.shoe, H.hand, H.limb, H.head and H.hair.*; a <gen>…</gen> block at the top of the source holds your own helpers, such as a pointing hand you reuse.

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 360">
   <rect id="@P@paper" width="480" height="360" fill="#f4f1ea"/>
   <defs><!--DEFS--></defs>
   <g id="@P@frame" transform="translate(0 0)">
   <g id="@P@art" filter="url(#@P@wob)" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
     ${H.pool(120, 307, 24)}
     <path d="M40 307.6 H150" stroke-width="2"/>
     …
   </g></g></svg>
   

2. The toned-shape triple. Same d three times: paper fill, dots, open outline.

   <path d="M98 190 C94 214 … Z" fill="#f4f1ea" stroke="none"/>
   <stip d="M98 190 C94 214 … Z" t="flat 0.19"/>
   <path d="M98 190 C94 214 90 236 88 252 C86 268 82 284 79 299