@doan-labs/peek 1.0.0 → 2.0.0

package/src/draw.ts

@@ -9,8 +9,10 @@
  * what is invisible (opacity 0) to stay small.
  */
 
-import type { Axes, Persona } from './identity'
+import { blocParts } from './bloc'
+import { type Axes, fnv1a, mulberry32, type Persona } from './identity'
 import {
+  ACCESSORY_INK,
   type Channel,
   type Channels,
   COLORS,
@@ -18,7 +20,10 @@ import {
   type Expression,
   FACES,
   type FaceGeom,
+  HAZE,
   INK,
+  type Variant,
+  WHEEL,
 } from './tables'
 
 export type Node = {
@@ -54,9 +59,12 @@ export type DrawOptions = {
   title: string | false
   /** Keep invisible nodes so an animator can write into them. */
   live?: boolean
+  /** How the face is drawn. Default 'peek'. */
+  variant?: Variant
 }
 
-export type Drawable = Axes & { persona: Persona }
+/** `key`, the tidied name, seeds Haze's blobs; without it, it hazes as ''. */
+export type Drawable = Axes & { persona: Persona; key?: string }
 
 /* The frame: viewBox -30 -30 400 400, the floor on its bottom edge. */
 export const VB = [-30, -30, 400, 400] as const
@@ -69,11 +77,15 @@ export const smooth = (a: number, b: number, v: number) => {
   const t = clamp((v - a) / (b - a), 0, 1)
   return t * t * (3 - 2 * t)
 }
-const f2 = (v: number) => String(Math.round(v * 100) / 100)
+export const f2 = (v: number) => String(Math.round(v * 100) / 100)
 const f3 = (v: number) => String(Math.round(v * 1000) / 1000)
 const strokeFor = (px: number) =>
   px >= 96 ? 1 : px >= 56 ? 1.25 : px >= 40 ? 1.6 : px >= 30 ? 2 : 2.4
 const RAD = Math.PI / 180
+// the sprout, drawn upward from where it is planted
+const STEM = 'M0 0Q3 -19 0 -36'
+const LEAF0 = 'M0 -33C-24 -30 -38 -52 -25 -53C-12 -54 -2 -43 0 -33Z'
+const LEAF1 = 'M0 -33C5 -54 28 -61 27 -48C26 -36 11 -31 0 -33Z'
 
 /** Where a face rests: the body offset, the eye line, one altitude unit. */
 export function frameOf(face: FaceGeom) {
@@ -208,7 +220,12 @@ export function ringWalk(sh: FaceGeom): { rest: number; min: number } {
 }
 
 type Attrs = Record<string, string | number | false | undefined>
-function n(tag: string, key: string, attrs: Attrs, children: Node[] = []) {
+export function n(
+  tag: string,
+  key: string,
+  attrs: Attrs,
+  children: Node[] = [],
+) {
   const out: Record<string, string> = {}
   for (const k in attrs) {
     const v = attrs[k]
@@ -227,14 +244,11 @@ function prune(node: Node): Node | null {
 
 export function draw(who: Drawable, pose: Pose, o: DrawOptions): Node {
   const sh: FaceGeom = FACES[who.face]
-  const { body: fill, deep } = COLORS[who.color]
   const P = who.persona
   const mul = P.mul as Partial<Record<Channel, number>>
   const add = P.add as Partial<Record<Channel, number>>
   const g = (c: Channel) => pose[c] * (mul[c] ?? 1) + (add[c] ?? 0)
-  const spread = P.spread
   const id = o.id
-  const st = strokeFor(o.size)
   const { baseY, R } = frameOf(sh)
   const defs: Node[] = []
 
@@ -363,8 +377,262 @@ export function draw(who: Drawable, pose: Pose, o: DrawOptions): Node {
   const B = sh.bottom
   const ty = baseY - alt * R
   const sc = (v: number) => Math.round(v * 100000) / 100000
-  const bodyNode =
+  const [front, back] = (o.variant === 'bloc' ? blocParts : peekParts)({
+    who,
+    pose,
+    o,
+    defs,
+    g,
+  })
+
+  // the plates sit a hair out of register at large sizes
+  const off = (dx: number, dy: number) =>
+    riso ? `translate(${f2(dx * k * upp)} ${f2(dy * k * upp)})` : undefined
+  const av = n(
+    'g',
+    'av',
+    {
+      transform: `translate(${f2(x)} ${f2(ty)}) rotate(${f2(rot)} 170 ${B}) translate(170 ${B}) scale(${sc(sx)} ${sc(sy)}) translate(-170 ${-B})`,
+      filter: dim > 0.01 ? `url(#${id}-dim)` : undefined,
+    },
+    [
+      n(
+        'g',
+        'plateA',
+        {
+          transform: off(-0.55, 0.45),
+          filter: riso ? `url(#${id}-pA)` : undefined,
+        },
+        front,
+      ),
+      n(
+        'g',
+        'plateB',
+        {
+          transform: off(0.6, -0.5),
+          filter: riso ? `url(#${id}-pB)` : undefined,
+        },
+        back,
+      ),
+    ],
+  )
+
+  // the thing in the corner: a dot lattice from the mark's vocabulary
+  const scene: Node[] = []
+  if (o.frame !== 'none') {
+    const bg =
+      o.frame === 'ink' ? INK.ink : o.frame === 'bone' ? INK.bone : INK.paper
+    scene.push(n('rect', 'bg', { ...VBr, fill: bg }))
+    const th = clamp(g('thing'), 0, 1)
+    const dots: Node[] = []
+    for (let j = 0; j < 3; j++)
+      for (let i = 0; i < 3; i++) {
+        const q = j * 3 + i
+        const kk = smooth(q / 12, q / 12 + 0.35, th)
+        dots.push(
+          n('circle', `lattice.${q}`, {
+            cx: 312 + i * 18,
+            cy: 2 + j * 18,
+            r: f2(1.2 + 2.2 * kk),
+            opacity: f3(kk * 0.55),
+          }),
+        )
+      }
+    scene.push(
+      n('g', 'lattice', { fill: o.frame === 'ink' ? INK.bone : INK.ink }, dots),
+    )
+  }
+  scene.push(av)
+  if (grainy)
+    scene.push(
+      n('rect', 'grain', {
+        ...VBr,
+        filter: `url(#${id}-grain)`,
+        opacity: o.frame === 'ink' ? 0.3 : 0.16,
+        'pointer-events': 'none',
+      }),
+    )
+
+  const root = n(
+    'svg',
+    'root',
+    {
+      xmlns: 'http://www.w3.org/2000/svg',
+      viewBox: VB.join(' '),
+      width: o.size,
+      height: o.size,
+      role: o.title === false ? undefined : 'img',
+      'aria-label': o.title === false ? undefined : o.title,
+      'aria-hidden': o.title === false ? 'true' : undefined,
+    },
+    [
+      n('defs', 'defs', {}, defs),
+      n('g', 'frame', { 'clip-path': `url(#${id}-f)` }, scene),
+    ],
+  )
+  return o.live ? root : (prune(root) ?? root)
+}
+
+/** What a variant draws from: the defs it may add to, and the pose reader. */
+export type Parts = {
+  who: Drawable
+  pose: Pose
+  o: DrawOptions
+  defs: Node[]
+  /** A channel with the persona applied. */
+  g: (c: Channel) => number
+}
+
+/*
+ * Haze, from the Haze sheet: the body is its own ink plus three soft radial
+ * blobs, cut to the outline. A deep one at the bottom, a tint from a hue
+ * neighbor low on the outer edge, a glow at the top. Where they sit comes
+ * from the name, mulberry32(fnv1a('haze:' + key)), so two faces of one
+ * color haze apart.
+ * Blob sizes are in body widths; the light level, used below 32px, keeps
+ * the face nearly peek where the haze would only be mud.
+ */
+const HAZE_LEVEL = {
+  medium: {
+    deep: [0.502, 0.224],
+    glow: [0.749, 0.337],
+    tint: [0.4, 0.5],
+    tintStops: [
+      [0, 0.878],
+      [0.15, 0.878],
+      [0.618, 0.396],
+    ],
+  },
+  light: {
+    deep: [0.298, 0.133],
+    glow: [0.549, 0.247],
+    tint: [0.31, 0.387],
+    tintStops: [
+      [0, 0.549],
+      [0.55, 0.247],
+    ],
+  },
+} as const
+
+function hazePaint(who: Drawable, o: DrawOptions): Node[] {
+  const sh: FaceGeom = FACES[who.face]
+  const id = o.id
+  const L = HAZE_LEVEL[o.size < 32 ? 'light' : 'medium']
+  // the body's box: the crown grown by its radius, down to the bottom
+  const xs = sh.crown.poly.map((p) => p[0])
+  const ys = sh.crown.poly.map((p) => p[1])
+  const x0 = Math.min(...xs) - sh.crown.r
+  const y0 = Math.min(...ys) - sh.crown.r
+  const W = Math.max(...xs) + sh.crown.r - x0
+  const H = sh.bottom - y0
+
+  // the sheet's own seed and draw order, fitted to its 12 names: never
+  // reorder these lines. The tint walks one track, low and out to high and in.
+  const rnd = mulberry32(fnv1a(`haze:${who.key ?? ''}`))
+  const warm = rnd() < 0.5
+  const left = rnd() < 0.5
+  const t = rnd()
+  const tintX = 0.04 + 0.174 * t
+  const tintY = 0.649 + 0.202 * t
+  const glowX = 0.38 - 0.12 * rnd()
+  const glowY = 0.12 + 0.099 * rnd()
+  const deepX = 0.251 - 0.151 * rnd()
+  const tintA = 90 - 180 * rnd()
+
+  const at = (inset: number, onLeft: boolean) =>
+    x0 + W * (onLeft ? inset : 1 - inset)
+  const i = WHEEL.indexOf(who.color)
+  const near = WHEEL[(i + (warm ? WHEEL.length - 1 : 1)) % WHEEL.length]!
+  const { body, deep } = COLORS[who.color]
+  const blob = (
+    k: string,
+    color: string,
+    [cx, cy, a, rx, ry]: [number, number, number, number, number],
+    stops: readonly (readonly [number, number])[],
+  ) =>
+    n(
+      'radialGradient',
+      `haze.${k}`,
+      {
+        id: `${id}-h${k[0]}`,
+        gradientUnits: 'userSpaceOnUse',
+        cx: 0,
+        cy: 0,
+        r: 1,
+        gradientTransform: `translate(${f2(cx)} ${f2(cy)}) rotate(${f2(a)}) scale(${f2(rx)} ${f2(ry)})`,
+      },
+      [...stops, [1, 0] as const].map(([at, op], j) =>
+        n('stop', `haze.${k}.${j}`, {
+          offset: at,
+          'stop-color': color,
+          'stop-opacity': op,
+        }),
+      ),
+    )
+  const fade = ([a, b]: readonly [number, number]) =>
+    [
+      [0, a],
+      [0.55, b],
+    ] as const
+  const blobs = [
+    blob(
+      'deep',
+      deep,
+      [at(deepX, !left), y0 + H * 0.95, 0, W * 0.5, W * 0.35],
+      fade(L.deep),
+    ),
+    blob(
+      'tint',
+      HAZE[near].tint,
+      [at(tintX, left), y0 + H * tintY, tintA, W * L.tint[0], W * L.tint[1]],
+      L.tintStops,
+    ),
+    blob(
+      'glow',
+      HAZE[who.color].glow,
+      [at(glowX, !left), y0 + H * glowY, 0, W * 0.475, W * 0.356],
+      fade(L.glow),
+    ),
+  ]
+  const shape = (key: string, paint: string) =>
     'd' in sh.body
+      ? n('path', key, {
+          d: sh.body.d,
+          fill: paint,
+          stroke: sh.body.stroke ? paint : undefined,
+          'stroke-width': sh.body.stroke,
+          'stroke-linejoin': sh.body.stroke ? 'round' : undefined,
+        })
+      : n('circle', key, {
+          cx: sh.body.circle[0],
+          cy: sh.body.circle[1],
+          r: sh.body.circle[2],
+          fill: paint,
+        })
+  return [
+    ...blobs,
+    n('g', 'haze', { id: `${id}-hz` }, [
+      shape('haze.body', body),
+      ...['deep', 'tint', 'glow'].map((k) =>
+        shape(`haze.${k}.fill`, `url(#${id}-h${k[0]})`),
+      ),
+    ]),
+  ]
+}
+
+/** The peek face, and Haze: the same face with a hazed body. */
+function peekParts({ who, pose, o, defs, g }: Parts): [Node[], Node[]] {
+  const sh: FaceGeom = FACES[who.face]
+  const { body: fill, deep } = COLORS[who.color]
+  const P = who.persona
+  const spread = P.spread
+  const id = o.id
+  const st = strokeFor(o.size)
+  const haze = o.variant === 'haze'
+  if (haze) defs.push(...hazePaint(who, o))
+  const bodyNode = haze
+    ? n('use', 'body', { href: `#${id}-hz` })
+    : 'd' in sh.body
       ? n('path', 'body', {
           d: sh.body.d,
           fill,
@@ -470,25 +738,47 @@ export function draw(who: Drawable, pose: Pose, o: DrawOptions): Node {
     const lrx = rx * 1.55
     const lry = ry * 1.15
     const top = ry + 1.6 - lower * ry * 1.5
+    // a bead has no white to show where it looks, so the whole eye leans
+    const [etx, ety] = bead
+      ? [ex + side * spread + gx * 6, ey + gy * 6]
+      : [ex + side * spread, ey]
+    const lids = [
+      n('rect', `${kk}.lid`, {
+        x: f2(-rx * 2.2),
+        y: f2(-ry * 3),
+        width: f2(rx * 4.4),
+        height: f2(Math.max(0, edge + ry * 3)),
+        transform: `rotate(${f2(a)})`,
+        fill,
+      }),
+      n('ellipse', `${kk}.lower`, {
+        cx: 0,
+        cy: f2(top + lry),
+        rx: f2(lrx),
+        ry: f2(lry),
+        fill,
+      }),
+    ]
+    // Haze: the lids cut the body's own paint, so they never read as patches
+    if (haze)
+      defs.push(n('clipPath', `${kk}.lidshape`, { id: `${id}-s${i}` }, lids))
     const parts: Node[] = [
       n('g', `${kk}.inner`, { 'clip-path': `url(#${id}-e${i})` }, inner),
-      n('g', `${kk}.lids`, { 'clip-path': `url(#${id}-l${i})` }, [
-        n('rect', `${kk}.lid`, {
-          x: f2(-rx * 2.2),
-          y: f2(-ry * 3),
-          width: f2(rx * 4.4),
-          height: f2(Math.max(0, edge + ry * 3)),
-          transform: `rotate(${f2(a)})`,
-          fill,
-        }),
-        n('ellipse', `${kk}.lower`, {
-          cx: 0,
-          cy: f2(top + lry),
-          rx: f2(lrx),
-          ry: f2(lry),
-          fill,
-        }),
-      ]),
+      n(
+        'g',
+        `${kk}.lids`,
+        { 'clip-path': `url(#${id}-l${i})` },
+        haze
+          ? [
+              n('g', `${kk}.lidpaint`, { 'clip-path': `url(#${id}-s${i})` }, [
+                n('use', `${kk}.lidbody`, {
+                  href: `#${id}-hz`,
+                  transform: `translate(${f2(-etx)} ${f2(-ety)})`,
+                }),
+              ]),
+            ]
+          : lids,
+      ),
     ]
     // a rimmed eye inks its lid edges too, so the outline follows the lids
     if (who.eyes === 'ring')
@@ -533,17 +823,7 @@ export function draw(who: Drawable, pose: Pose, o: DrawOptions): Node {
         opacity: co > 0.01 ? f2(co) : 0,
       }),
     )
-    return n(
-      'g',
-      kk,
-      {
-        // a bead has no white to show where it looks, so the whole eye leans
-        transform: bead
-          ? `translate(${f2(ex + side * spread + gx * 6)} ${f2(ey + gy * 6)})`
-          : `translate(${f2(ex + side * spread)} ${ey})`,
-      },
-      parts,
-    )
+    return n('g', kk, { transform: `translate(${f2(etx)} ${f2(ety)})` }, parts)
   })
 
   // brows
@@ -760,90 +1040,223 @@ export function draw(who: Drawable, pose: Pose, o: DrawOptions): Node {
   }
   const trait = n('g', 'trait', { transform: traitT }, [shape])
 
-  // the plates sit a hair out of register at large sizes
-  const off = (dx: number, dy: number) =>
-    riso ? `translate(${f2(dx * k * upp)} ${f2(dy * k * upp)})` : undefined
-  const av = n(
-    'g',
-    'av',
-    {
-      transform: `translate(${f2(x)} ${f2(ty)}) rotate(${f2(rot)} 170 ${B}) translate(170 ${B}) scale(${sc(sx)} ${sc(sy)}) translate(-170 ${-B})`,
-      filter: dim > 0.01 ? `url(#${id}-dim)` : undefined,
-    },
-    [
+  // Wardrobe lives on the same body transform as the face. Glasses grow
+  // around the eye sockets, never around the pupils, so gaze stays free.
+  const wardrobe: Node[] = []
+  // strokes follow the same ramp as the face, capped so small hats stay hats
+  const w = (px: number) => f2(px * Math.min(st, 1.6))
+  const line = {
+    fill: 'none',
+    stroke: INK.ink,
+    'stroke-width': w(5.25),
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+  }
+  if (who.eyewear !== 'none') {
+    const lx = sh.eyes[0][0] - spread
+    const rr = sh.eyes[1][0] + spread
+    const ey = sh.eyes[0][1]
+    const gap = rr - lx
+    const erx = Math.min(rx + 9, (gap - 15) / 2)
+    const ery = ry + 9
+    const glasses = who.eyewear === 'glasses'
+    const lensX = glasses ? erx : Math.min(rx + 11, (gap - 12) / 2)
+    const top = glasses ? ey - 4 : ey - ry - 2
+    const frames: Node[] = [
+      n('path', 'eyewear.bridge', {
+        ...line,
+        d: `M${f2(lx + lensX)} ${f2(top)}Q${f2((lx + rr) / 2)} ${f2(top - (glasses ? 13 : 0))} ${f2(rr - lensX)} ${f2(top)}`,
+      }),
+    ]
+    for (const [i, cx] of [lx, rr].entries()) {
+      const key = `eyewear.lens${i}`
+      frames.push(
+        n('path', `${key}.arm`, {
+          ...line,
+          d:
+            i === 0
+              ? `M${f2(cx - lensX - 9)} ${f2(top + 2)}L${f2(cx - lensX)} ${f2(top)}`
+              : `M${f2(cx + lensX)} ${f2(top)}L${f2(cx + lensX + 9)} ${f2(top + 2)}`,
+        }),
+      )
+      if (glasses) {
+        frames.push(
+          n('ellipse', key, {
+            ...line,
+            cx: f2(cx),
+            cy: ey,
+            rx: f2(erx),
+            ry: f2(ery),
+          }),
+        )
+        frames.push(
+          n('path', `${key}.glint`, {
+            ...line,
+            stroke: INK.paper,
+            'stroke-width': w(3),
+            d: `M${f2(cx - erx * 0.65)} ${f2(ey - ery * 0.45)}Q${f2(cx - erx * 0.5)} ${f2(ey - ery * 0.8)} ${f2(cx - erx * 0.2)} ${f2(ey - ery * 0.86)}`,
+          }),
+        )
+      } else {
+        const h = ry * 2 + 9
+        frames.push(
+          n('path', key, {
+            d: `M${f2(cx - lensX)} ${f2(top)}H${f2(cx + lensX)}V${f2(top + h * 0.55)}Q${f2(cx + lensX)} ${f2(top + h)} ${f2(cx)} ${f2(top + h)}Q${f2(cx - lensX)} ${f2(top + h)} ${f2(cx - lensX)} ${f2(top + h * 0.55)}Z`,
+            fill: INK.ink,
+            stroke: INK.ink,
+            'stroke-width': w(3),
+            'stroke-linejoin': 'round',
+          }),
+        )
+        frames.push(
+          n('path', `${key}.glint`, {
+            ...line,
+            stroke: INK.paper,
+            'stroke-width': w(4),
+            d: `M${f2(cx - lensX * 0.58)} ${f2(top + 19)}l8 -8m-1 15 6 -6`,
+          }),
+          n('circle', `${key}.pin`, {
+            cx: f2(cx + lensX * 0.55),
+            cy: f2(top + h - 9),
+            r: 1.7,
+            fill: INK.paper,
+          }),
+        )
+      }
+    }
+    wardrobe.push(n('g', 'eyewear', {}, frames))
+  }
+  if (who.headwear !== 'none') {
+    // Reserve the side opposite the crest. The seat stays fixed through
+    // expressions, so a moving crest never makes a hat switch sides.
+    const side = who.trait === 'ring' || who.trait === 'dot' ? -1 : 1
+    const cap = who.headwear === 'cap'
+    const sprout = who.headwear === 'sprout'
+    // The sheet measures placement across the crown, not along its arc.
+    // Solve that horizontal offset so low, round faces keep the brim above
+    // their brows instead of walking the hat down the side of the body.
+    const inset = sprout ? -6 : cap ? -8 : 0
+    const offset = sprout ? 34 : 40
+    let lo = 0
+    let hi = 160
+    for (let i = 0; i < 16; i++) {
+      const mid = (lo + hi) / 2
+      const p = seat(sh.crown, inset, side * mid)
+      if (side * (p.x - 170) < offset) lo = mid
+      else hi = mid
+    }
+    const anchor = seat(sh.crown, inset, (side * (lo + hi)) / 2)
+    const angle = clamp(anchor.a, -40, 40)
+    const parts: Node[] = []
+    if (cap) {
+      parts.push(
+        n('path', 'headwear.crown', {
+          ...line,
+          fill: INK.paper,
+          d: 'M-33 0C-35 -20 -20 -39 0 -39C20 -39 35 -20 33 0Z',
+        }),
+        n('path', 'headwear.seam', {
+          ...line,
+          'stroke-width': w(3.5),
+          d: 'M-4 -38Q9 -24 8 -1',
+        }),
+        n('path', 'headwear.brim', {
+          ...line,
+          'stroke-width': w(7),
+          d: side > 0 ? 'M-35 1Q8 4 52 3' : 'M-52 3Q-8 4 35 1',
+        }),
+        n('circle', 'headwear.button', {
+          cx: 0,
+          cy: -40,
+          r: 3.5,
+          fill: INK.ink,
+        }),
+      )
+    } else if (sprout) {
+      parts.push(
+        // a body-colored halo keeps the ink stem off an ink ground
+        n('path', 'headwear.halo', {
+          ...line,
+          stroke: fill,
+          'stroke-width': w(11),
+          d: `${STEM}${LEAF0}${LEAF1}`,
+        }),
+        n('path', 'headwear.stem', {
+          ...line,
+          'stroke-width': w(4.5),
+          d: STEM,
+        }),
+        n('path', 'headwear.leaf0', {
+          ...line,
+          'stroke-width': w(4),
+          fill: COLORS.mint.body,
+          d: LEAF0,
+        }),
+        n('path', 'headwear.leaf1', {
+          ...line,
+          'stroke-width': w(4),
+          fill: COLORS.mint.deep,
+          d: LEAF1,
+        }),
+      )
+    } else {
+      parts.push(
+        n('path', 'headwear.wings', {
+          d: 'M-3 0C-13 -16 -28 -23 -29 -10C-31 2 -26 19 -16 13L-3 4L3 4L16 13C26 19 31 2 29 -10C28 -23 13 -16 3 0Z',
+          fill: INK.ink,
+          // the same halo, painted under the fill
+          stroke: fill,
+          'stroke-width': w(6),
+          'stroke-linejoin': 'round',
+          'paint-order': 'stroke',
+        }),
+        n('ellipse', 'headwear.knot', {
+          cx: 0,
+          cy: 1,
+          rx: 6,
+          ry: 8,
+          fill: ACCESSORY_INK.knot,
+        }),
+      )
+    }
+    wardrobe.push(
       n(
         'g',
-        'plateA',
+        'headwear',
         {
-          transform: off(-0.55, 0.45),
-          filter: riso ? `url(#${id}-pA)` : undefined,
+          transform: `translate(${f2(anchor.x)} ${f2(anchor.y)}) rotate(${f2(sprout ? angle * 0.5 : angle)})`,
         },
-        [bodyNode, ...cheeks, trait],
+        parts,
       ),
+    )
+  }
+  if (who.neckwear === 'tie') {
+    // The knot follows the mouth's lowest edge, including its skew. The
+    // floor clips the blade, just as it clips the creature itself.
+    const skew = Math.abs(Math.sin(g('mk') * RAD)) * mw
+    const bottom = Math.max(0, mt * kb, mb * kb) + skew + m.sw * st
+    wardrobe.push(
       n(
         'g',
-        'plateB',
+        'neckwear',
         {
-          transform: off(0.6, -0.5),
-          filter: riso ? `url(#${id}-pB)` : undefined,
+          transform: `translate(${m.x} ${f2(m.y + g('my') + bottom + 8)})`,
+          fill: INK.ink,
         },
-        [...eyes, ...brows, mouth],
-      ),
-    ],
-  )
-
-  // the thing in the corner: a dot lattice from the mark's vocabulary
-  const scene: Node[] = []
-  if (o.frame !== 'none') {
-    const bg =
-      o.frame === 'ink' ? INK.ink : o.frame === 'bone' ? INK.bone : INK.paper
-    scene.push(n('rect', 'bg', { ...VBr, fill: bg }))
-    const th = clamp(g('thing'), 0, 1)
-    const dots: Node[] = []
-    for (let j = 0; j < 3; j++)
-      for (let i = 0; i < 3; i++) {
-        const q = j * 3 + i
-        const kk = smooth(q / 12, q / 12 + 0.35, th)
-        dots.push(
-          n('circle', `lattice.${q}`, {
-            cx: 312 + i * 18,
-            cy: 2 + j * 18,
-            r: f2(1.2 + 2.2 * kk),
-            opacity: f3(kk * 0.55),
+        [
+          n('path', 'neckwear.knot', {
+            d: 'M-9 0Q-11 0 -9 4L-5 11Q0 15 5 11L9 4Q11 0 9 0Z',
           }),
-        )
-      }
-    scene.push(
-      n('g', 'lattice', { fill: o.frame === 'ink' ? INK.bone : INK.ink }, dots),
+          n('path', 'neckwear.blade', {
+            d: 'M-4 15L-13 63Q-14 66 -11 69L0 79L11 69Q14 66 13 63L4 15Z',
+          }),
+        ],
+      ),
     )
   }
-  scene.push(av)
-  if (grainy)
-    scene.push(
-      n('rect', 'grain', {
-        ...VBr,
-        filter: `url(#${id}-grain)`,
-        opacity: o.frame === 'ink' ? 0.3 : 0.16,
-        'pointer-events': 'none',
-      }),
-    )
 
-  const root = n(
-    'svg',
-    'root',
-    {
-      xmlns: 'http://www.w3.org/2000/svg',
-      viewBox: VB.join(' '),
-      width: o.size,
-      height: o.size,
-      role: o.title === false ? undefined : 'img',
-      'aria-label': o.title === false ? undefined : o.title,
-      'aria-hidden': o.title === false ? 'true' : undefined,
-    },
-    [
-      n('defs', 'defs', {}, defs),
-      n('g', 'frame', { 'clip-path': `url(#${id}-f)` }, scene),
-    ],
-  )
-  return o.live ? root : (prune(root) ?? root)
+  return [
+    [bodyNode, ...cheeks, trait],
+    [...eyes, ...brows, mouth, ...wardrobe],
+  ]
 }