@originkit/avatars 0.0.0-stage → 0.2.0

package/dist/buddies/index.js

@@ -0,0 +1,363 @@
+/**
+ * Buddies: sticker cats in a thick, warm outline and flat colour. Two characters, a striped
+ * tabby and a calico, each traced from its own reference, and both sharing the same
+ * expressions and gestures.
+ *
+ * The hands and the shades are traced too, each from the reference that has them: the
+ * tabby's paws to its cheeks, the calico's paw at its sunglasses, and a salute traced from a
+ * croc's. Every character uses those same drawings, placed on its own face, and the other gestures are
+ * drawn with the calico's paw, so all the hands are the same hands.
+ */
+import { mix, WHITE } from "../colors.js";
+import { scopeAll } from "../art.js";
+import { calmed } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+/** Solid cards. */
+export const TILES = ["#ffffff", "#fff3d6", "#ffe0e6", "#dff1ff", "#e3f7dc", "#efe6ff", "#ffe8cf", "#fff8b8", "#d9f5f0"];
+export const INK = "#1f1a17";
+const PINK = "#f2896a";
+const BLUSH = "#ff9aa2";
+const TONGUE = "#ff7a93";
+const HEART = "#ef4b5f";
+const LENS = "#2b211d";
+const GLINT = "#6d6058";
+const round2 = (value) => Math.round(value * 100) / 100;
+const point = (x, y) => `${round2(x)} ${round2(y)}`;
+const at = ([x, y]) => point(x, y);
+/** A closed curve through every point, as a Catmull-Rom spline. */
+function blob(points) {
+    const n = points.length;
+    let d = `M${at(points[0])}`;
+    for (let i = 0; i < n; i++) {
+        const [p0, p1, p2, p3] = [points[(i + n - 1) % n], points[i], points[(i + 1) % n], points[(i + 2) % n]];
+        d += `C${point(p1[0] + (p2[0] - p0[0]) / 6, p1[1] + (p2[1] - p0[1]) / 6)} ${point(p2[0] - (p3[0] - p1[0]) / 6, p2[1] - (p3[1] - p1[1]) / 6)} ${at(p2)}`;
+    }
+    return `${d}Z`;
+}
+// The tabby's paws to its cheeks, each placed by the eye above it. Their outsides are the
+// tabby's own sides, so on the tabby only the lines are drawn.
+const CHEEK_PAWS = [
+    {
+        from: [43.4, 48.8],
+        inOutline: true,
+        lines: "M20.5 55Q22.6 52.4 26 51.2Q30.6 50 34.6 46.8Q36.8 44.6 38.6 44.4Q40.6 44.4 40.2 46.4Q39.4 49.4 37.6 51.4Q37.4 52.4 39 52.8Q41.6 53.6 43.6 54.8Q44.8 55.8 43.8 56.6Q41.6 57.4 38.6 57.8Q37 58.4 36.4 61.2Q35.8 64 33.2 66.4Q35.6 68 37.6 71.6Q39 75.6 39.2 80Q39 84 37.2 86.8",
+        fill: "M20.5 55Q22.6 52.4 26 51.2Q30.6 50 34.6 46.8Q36.8 44.6 38.6 44.4Q40.6 44.4 40.2 46.4Q39.4 49.4 37.6 51.4Q37.4 52.4 39 52.8Q41.6 53.6 43.6 54.8Q44.8 55.8 43.8 56.6Q41.6 57.4 38.6 57.8Q37 58.4 36.4 61.2Q35.8 64 33.2 66.4Q35.6 68 37.6 71.6Q39 75.6 39.2 80Q39 84 37.2 86.8L36.4 112L18.4 112Q18 100 16.6 92Q14.4 86 13.8 78Q13.8 70 16 65Q13.6 64 14.6 60Z",
+    },
+    {
+        from: [55.7, 47.4],
+        inOutline: true,
+        lines: "M79.4 50.6Q74 48.6 67.4 48.2Q65.8 47.8 65.2 45.6Q64.4 42.2 62.6 41.2Q61.4 41 61.6 43Q62 46.4 62.4 48.6Q62.2 51.4 59.6 52.8Q57 54 56.4 55.6Q56.4 57.2 58.6 57.6Q62.4 57.8 64.4 57.8Q65.6 59.4 66 62Q66.4 63.8 68.6 65.2Q66.8 67.6 65.2 72Q64.4 76 64.8 80Q65.2 82.4 66 83.6",
+        fill: "M79.4 50.6Q74 48.6 67.4 48.2Q65.8 47.8 65.2 45.6Q64.4 42.2 62.6 41.2Q61.4 41 61.6 43Q62 46.4 62.4 48.6Q62.2 51.4 59.6 52.8Q57 54 56.4 55.6Q56.4 57.2 58.6 57.6Q62.4 57.8 64.4 57.8Q65.6 59.4 66 62Q66.4 63.8 68.6 65.2Q66.8 67.6 65.2 72Q64.4 76 64.8 80Q65.2 82.4 66 83.6L66 112L92 112Q91 100 89.6 93Q86.2 89.2 83.4 86.2Q86 85 87.6 82Q89 76 88 70Q86 65 82.6 61Q81 58 80.2 53Z",
+    },
+];
+/** The outsides of those arms, for anyone whose sides aren't already the tabby's. */
+const CHEEK_SIDES = [
+    "M14.6 60Q13.6 64 16 65Q13.8 70 13.8 78Q14.4 86 16.6 92Q18 100 18.4 112",
+    "M80.2 53Q81 58 82.6 61Q86 65 88 70Q89 76 87.6 82Q86 85 83.4 86.2Q86.2 89.2 89.6 93Q91 100 92 112",
+];
+const TABBY_CHIN = "M38.8 77.4Q47 78.2 54 76.8Q60 75.4 64.2 74.4";
+// The calico's sunglasses, placed by the middle of its eyes: a heavy bar along the top, two
+// wide lenses flat on top and round below, and a glint in each.
+const SHADES_AT = [41.5, 47.5];
+const LENSES = "M11 36.6Q20 35.6 30 36.6Q35 37.4 37.8 39.8Q37.6 47 34.6 51.6Q30.6 55 24 55.2Q17.4 54.6 14.2 49Q12 44 11 36.6Z" +
+    "M44.6 41Q46 40.2 52 39.4Q62 38.6 70 39.4Q73 39.8 74.2 41.2Q73.4 49 69.6 54.4Q65 59.6 58.8 60.2Q52 60 48.4 55.2Q45.4 50 44.6 41Z" +
+    "M37.6 39.6Q41 39.8 44.8 41.2L44.8 44.4Q41 43.2 37.4 43.4Z";
+const SHADES_BAR = "M10.4 36Q22 34.4 37.6 38.6Q41 39.6 44.8 40.6Q60 38 74.4 40.2";
+const SHADES_GLINT = "M14.6 38.6Q24 37.6 32.4 39.6M47.6 42.4Q58 41 70.4 42M13.4 40.6Q13.6 45 15.6 49";
+/** The end of the bar, where the calico's paw holds them. */
+const SHADES_END = [74.2, 41.2];
+// The calico's paw at the shades, its arm curving down and round its side.
+const SHADES_PAW = {
+    from: SHADES_END,
+    lines: "M73.6 44.8Q74 41.6 77.4 40.4Q82 39.4 86.6 42.6Q91.6 46.6 94 55Q95.8 63.6 95.4 72Q94.8 82 91.6 88.6Q88 93.6 82.6 94.4Q76 94 71 90Q68.6 88 67.6 86.6" +
+        "M73.6 44.8Q72.2 47 73.6 49Q75.6 50.4 74.6 52.6Q74.4 55.4 76.6 56.4Q78.2 57.6 77.4 60Q78 62.6 80.4 63.8Q82.6 64.8 84.6 65" +
+        "M82 65.4Q79.6 69 79.4 73Q79.4 77 79.8 80M75.4 48.2Q79 47 82.8 47.4M76.4 55.8Q78.6 54.2 80.6 53.8",
+    fill: "M73.6 44.8Q74 41.6 77.4 40.4Q82 39.4 86.6 42.6Q91.6 46.6 94 55Q95.8 63.6 95.4 72Q94.8 82 91.6 88.6Q88 93.6 82.6 94.4Q76 94 71 90Q68.6 88 67.6 86.6" +
+        "L79.8 80Q79.4 77 79.4 73Q79.6 69 82 65.4L84.6 65Q82.6 64.8 80.4 63.8Q78 62.6 77.4 60Q78.2 57.6 76.6 56.4Q74.4 55.4 74.6 52.6Q75.6 50.4 73.6 49Q72.2 47 73.6 44.8Z",
+};
+// A salute, traced from a croc's: the arm up from the side, fingers along the brow and the
+// thumb under the eye, placed by that eye. No character is traced with it, so it's always filled.
+const SALUTE = {
+    from: [35, 39.4],
+    lines: "M26.7 84Q20 81 12 76Q7 70 6.6 62Q7.6 56 13 50.4Q15.6 47.6 14.4 42.6Q15.4 39.6 20 38.8L22.6 38.4Q22.4 34 24.6 31.8Q27.6 30.2 30 31.4" +
+        "M26 34.6Q28.6 35.6 28.6 38.4L28.6 42.6Q33 42.4 37 44Q38.6 46 37.4 47Q34 47.8 29.6 47.6Q28.6 50.6 28.4 55Q26.6 57.4 24.4 58.6Q26.4 61.4 28.4 63Q30 68 31.6 72.4Q32.6 74.6 34.6 75",
+    fill: "M26.7 84Q20 81 12 76Q7 70 6.6 62Q7.6 56 13 50.4Q15.6 47.6 14.4 42.6Q15.4 39.6 20 38.8L22.6 38.4Q22.4 34 24.6 31.8Q27.6 30.2 30 31.4" +
+        "L26 34.6Q28.6 35.6 28.6 38.4L28.6 42.6Q33 42.4 37 44Q38.6 46 37.4 47Q34 47.8 29.6 47.6Q28.6 50.6 28.4 55Q26.6 57.4 24.4 58.6Q26.4 61.4 28.4 63Q30 68 31.6 72.4Q32.6 74.6 34.6 75L30 80Z",
+};
+/** The calico's paw on its own, fingers up, for the gestures no reference shows. */
+const MITTEN = "M-6.4 -1Q-7 -7.6 -2.4 -9.6Q2.6 -11 6 -7.6Q8.6 -4.4 7.8 1Q7.2 6.6 3 8.4Q-1.6 9.6 -4.4 7.6Q-7.4 5.6 -6.4 2.4Q-7.6 0.6 -6.4 -1Z";
+const MITTEN_CREASES = "M-6 -3.8Q-1 -4.6 3.8 -4.4M-5.4 2.2Q-2.6 1.4 -0.6 0.4";
+const tabbyStripes = (fur) => mix(fur, "#e0a020", 0.3);
+/** Neighbours are as unlike as possible. */
+export const CHARACTERS = [
+    {
+        // Traced from the first reference at a tenth of 1080 px: one soft blob with no neck, its
+        // rounded left ear and pointed right ear part of the same outline, and arms whose
+        // outsides are its sides.
+        name: "Tabby",
+        head: [
+            [18.5, 43], [18.6, 36], [19.6, 31], [21.4, 29.6], [25, 29.6], [27.6, 30.8], [29.2, 32], [32, 30.6], [40, 29.6], [50, 29.2], [56, 30],
+            [57.2, 30.6], [59, 28.4], [61.8, 25.8], [64.2, 24.2], [65.6, 24.6], [66.4, 27.4], [67.2, 31.2], [69, 32.6], [73, 35.4], [76, 39.6],
+            [78.4, 44.6], [79.4, 48.6], [80.2, 53], [81, 57.4], [82.6, 61], [86, 65], [88, 70], [88.8, 76], [87.6, 82], [83.4, 86.2], [86.2, 89.2],
+            [89.6, 93], [91, 100], [92, 112], [19, 112], [18, 100], [17, 91], [15, 84.6], [14, 78], [14, 72], [15, 68], [16.4, 65.4], [15.4, 63.6],
+            [14.4, 59.6], [14.2, 54.6], [15, 50], [16.6, 46.4],
+        ],
+        body: "",
+        furs: ["#f2cd7a", "#c9c3bb", "#f3a85b", "#e9e4dc", "#8a8a92"],
+        eyes: [[43.4, 48.8], [55.7, 47.4]],
+        mouth: [51.1, 56.2, 0.95, 0],
+        nose: (_, weight) => `<path d="M47.9 51.8Q47.9 50.6 51.1 50.6Q54.3 50.6 54.3 51.8Q53.7 53.8 51.1 54.1Q48.5 53.8 47.9 51.8Z" fill="${INK}"/><path d="M51.1 54V56.2" fill="none" stroke="${INK}" stroke-width="${round2(weight)}" stroke-linecap="round"/>`,
+        cheeks: [[36, 55], [62, 54]],
+        shoulders: [[21, 82], [80, 80]],
+        chest: [51, 88],
+        whiskers: "M8 50.2L20 53M7.6 60L17.4 60M79.8 48.2L85 44.6M81 54.4L88.4 53.2",
+        markings: (fur) => `<g clip-path="url(#buddy-head)"><path d="M34.4 32.2L35.4 40.2M43 31.2L43.6 38.6M50 31.6L50.6 37.4M75.2 45.8L78.6 46.4" fill="none" stroke="${tabbyStripes(fur)}" stroke-width="3.6" stroke-linecap="round"/>` +
+            `<path d="M15 74.6L24 74.4M16 86L28 82.6M74 68.4L85 66.6M75 79L85 80.4" fill="none" stroke="${tabbyStripes(fur)}" stroke-width="4.6" stroke-linecap="round"/>` +
+            `<ellipse cx="23.8" cy="35.4" rx="2.2" ry="2.6" fill="${tabbyStripes(fur)}"/><ellipse cx="63.6" cy="28.8" rx="1.3" ry="2" transform="rotate(-15 63.6 28.8)" fill="${tabbyStripes(fur)}"/></g>`,
+        shades: [0.62, -4],
+        ovalEyes: true,
+        weight: 1.75,
+        frame: "",
+    },
+    {
+        // Traced from the third reference at a tenth of 736 px: a cream calico turned to one side,
+        // orange patches with stripes, ears pink and tufted, a pink nose and fur on its chest.
+        name: "Calico",
+        head: [
+            [23.4, 6.8], [26, 9], [32, 13.4], [40, 17.8], [50, 17.6], [58, 19], [64.6, 20.6], [72, 15.6], [78, 12.2], [84, 10.6], [84.8, 14], [84.2, 24],
+            [83, 33], [82.4, 40], [83, 52], [80, 62], [70, 69.4], [57.6, 73.4], [45, 75], [33, 72.6], [24, 70], [18.6, 65.4], [15.4, 60], [14.4, 52],
+            [15, 44], [17.4, 36], [20, 29], [20.4, 20], [21.4, 12],
+        ],
+        body: "M24 69C18 76 12 88 7.5 105L93 105C92 90 89 76 79 64Z",
+        furs: ["#fdf0d8", "#ffffff", "#f1e6da", "#fbe3c8", "#eef0f3"],
+        eyes: [[27.5, 47], [54, 49.5]],
+        mouth: [38.2, 62, 1, 0],
+        nose: (_, weight) => `<path d="M34.8 53.8Q38.2 52.8 41.8 53.8Q40.6 56.6 38.2 57Q35.8 56.6 34.8 53.8Z" fill="${PINK}" stroke="${INK}" stroke-width="${round2(weight * 0.8)}" stroke-linejoin="round"/>` +
+            `<path d="M38.2 57V61" fill="none" stroke="${INK}" stroke-width="${round2(weight)}" stroke-linecap="round"/>`,
+        cheeks: [[22, 58], [68, 60]],
+        shoulders: [[22, 80], [80, 78]],
+        chest: [45, 88],
+        whiskers: "M9.4 58.4L14.6 58.2M11.4 64L16 61.4",
+        details: (fur, _, weight) => `<path d="M73.6 17L82.8 12.4Q83.4 22 81.6 33Q78 31 74.6 30.6Q76 27 73.6 26Q75.6 23.4 73.4 21Z" fill="${mix(fur, PINK, 0.6)}"/>` +
+            `<path d="M25.4 11.4Q28 17 29.8 22.6M24.6 22.6L29.8 24.4L27.4 26M71.4 25.2L76.4 26.4M70.4 29.4L75.6 29M23.8 80Q21.6 88 19.6 96" fill="none" stroke="${INK}" stroke-width="${round2(weight * 0.8)}" stroke-linecap="round" stroke-linejoin="round"/>` +
+            `<path d="M31.4 84Q32.6 93.4 35.6 87.6Q36.6 94.6 39.6 89.6M40.6 91.6Q43.6 96 46.4 88.6" fill="none" stroke="${mix(fur, "#b8875a", 0.5)}" stroke-width="1.6" stroke-linecap="round"/><circle cx="51.6" cy="86.2" r="0.9" fill="${mix(fur, "#b8875a", 0.5)}"/>`,
+        markings: (_, patch) => `<g clip-path="url(#buddy-head)"><path d="${blob([[21, 8], [32, 13], [40, 18], [64, 20.6], [72, 15.6], [84, 10.6], [84.4, 38], [74, 37.6], [62, 36.4], [52, 37.4], [47, 34], [45.6, 28.6], [42, 24.4], [36, 23.6], [30, 26.6], [25, 30], [20, 29]])}" fill="${patch}"/>` +
+            `<path d="M39.6 19.2Q37.6 23 36.2 27.4M48.2 20.4Q47.2 25 46.4 30M55.2 21Q53.4 25.4 51.6 30.4" fill="none" stroke="${mix(patch, INK, 0.22)}" stroke-width="2.2" stroke-linecap="round"/></g>` +
+            `<g clip-path="url(#buddy-body)"><ellipse cx="71.6" cy="96.4" rx="5" ry="7" fill="${patch}"/></g>`,
+        shades: [1, 0],
+        weight: 1.25,
+        frame: "",
+    },
+];
+/** A calico's patches, which can be changed apart from its fur. */
+export const PATCHES = ["#f0a04b", "#3a3330", "#8c8279", "#d9772f", "#c9a27a"];
+export const MOODS = [
+    { name: "Content", eyes: ["dot", "dot"], mouth: "w" },
+    { name: "Happy", eyes: ["happy", "happy"], mouth: "smile" },
+    { name: "Smug", eyes: ["half", "half"], mouth: "smirk" },
+    { name: "Wink", eyes: ["dot", "wink"], mouth: "w" },
+    { name: "Blushing", eyes: ["dot", "dot"], mouth: "w", blush: true },
+    { name: "Surprised", eyes: ["round", "round"], mouth: "o" },
+    { name: "Grumpy", eyes: ["dot", "dot"], mouth: "frown", brows: true },
+    { name: "Sleepy", eyes: ["line", "line"], mouth: "o" },
+    { name: "In love", eyes: ["heart", "heart"], mouth: "w" },
+    { name: "Cheeky", eyes: ["dot", "dot"], mouth: "tongue" },
+];
+/** What its paws are doing. Neighbours are as unlike as possible. */
+export const GESTURES = [
+    { name: "Cheeks" },
+    { name: "Shades" },
+    { name: "Salute" },
+    { name: "Heart" },
+    { name: "Wave" },
+    { name: "Shy" },
+    { name: "Peace" },
+    { name: "Chill" },
+];
+export const POSES = [
+    { name: "Centre", transform: "" },
+    { name: "Mirrored", transform: "translate(100 0) scale(-1 1)", mirrored: true },
+    { name: "Close up", transform: "translate(50 56) scale(1.2) translate(-50 -56)" },
+    { name: "Peeking", transform: "translate(0 16)" },
+    { name: "Small", transform: "translate(50 110) scale(0.84) translate(-50 -110)" },
+    { name: "Tilted", transform: "rotate(-9 50 100)" },
+];
+export const characterOf = (t) => t.pick("character", CHARACTERS);
+export const moodOf = (t) => t.pick("mood", MOODS);
+export const gestureOf = (t) => t.pick("gesture", GESTURES).name;
+export const poseOf = (t) => t.pick("pose", POSES);
+export function coloursOf(t, character) {
+    return {
+        tile: t.color("tile") ?? t.pick("tile", TILES),
+        fur: t.color("fur") ?? t.pick("fur", character.furs),
+        patch: t.color("patch") ?? t.pick("patch", PATCHES),
+    };
+}
+function drawEye(kind, size, oval) {
+    const line = `fill="none" stroke="${INK}" stroke-width="${round2(1.7 * size)}" stroke-linecap="round"`;
+    switch (kind) {
+        case "happy":
+            return `<path d="M${point(-2.6 * size, 0.8 * size)}Q0 ${round2(-2.6 * size)} ${point(2.6 * size, 0.8 * size)}" ${line}/>`;
+        case "half":
+            return `<g data-pupil=""><circle cx="0" cy="${round2(0.5 * size)}" r="${round2(1.9 * size)}" fill="${INK}"/></g><path d="M${point(-3 * size, -0.9 * size)}H${round2(3 * size)}" ${line}/>`;
+        case "wink":
+            return `<path d="M${point(-2.6 * size, 0.6 * size)}Q0 ${round2(-2.2 * size)} ${point(2.6 * size, 0.6 * size)}" ${line}/>`;
+        case "round":
+            return `<circle cx="0" cy="0" r="${round2(3.4 * size)}" fill="#fff" stroke="${INK}" stroke-width="${round2(1.4 * size)}"/><g data-pupil=""><circle cx="0" cy="0" r="${round2(1.6 * size)}" fill="${INK}"/></g>`;
+        case "line":
+            return `<path d="M${point(-2.6 * size, 0.2 * size)}Q0 ${round2(1.6 * size)} ${point(2.6 * size, 0.2 * size)}" ${line}/>`;
+        case "heart": {
+            const s = size * 0.95;
+            return `<g data-pupil=""><path d="M0 ${round2(2.6 * s)}C${point(-4 * s, 0)} ${point(-3.2 * s, -3 * s)} ${point(-1.5 * s, -3 * s)}C${point(-0.6 * s, -3 * s)} 0 ${round2(-2.2 * s)} 0 ${round2(-1.6 * s)}C0 ${round2(-2.2 * s)} ${point(0.6 * s, -3 * s)} ${point(1.5 * s, -3 * s)}C${point(3.2 * s, -3 * s)} ${point(4 * s, 0)} 0 ${round2(2.6 * s)}Z" fill="${HEART}"/></g>`;
+        }
+        default:
+            // Upright ovals, as the references have them, or round with a shine.
+            return oval
+                ? `<g data-pupil=""><ellipse cx="0" cy="0" rx="${round2(1.45 * size)}" ry="${round2(2.1 * size)}" fill="${INK}"/></g>`
+                : `<g data-pupil=""><circle cx="0" cy="0" r="${round2(2 * size)}" fill="${INK}"/><circle cx="${round2(0.7 * size)}" cy="${round2(-0.7 * size)}" r="${round2(0.6 * size)}" fill="#fff"/></g>`;
+    }
+}
+/** The mouth, in its own frame, its middle at 0 0 just under the nose. */
+function drawMouth(kind, weight) {
+    const line = `fill="none" stroke="${INK}" stroke-width="${round2(weight)}" stroke-linecap="round" stroke-linejoin="round"`;
+    const w = "M-3.8 0Q-1.9 2.8 0 0Q1.9 2.8 3.8 0";
+    switch (kind) {
+        case "smile":
+            return `<path d="M-4.2 -0.4Q0 7 4.2 -0.4Z" fill="${INK}" stroke="${INK}" stroke-width="${round2(weight * 0.8)}" stroke-linejoin="round"/><path d="M-2.2 3.2Q0 5.2 2.2 3.2Q0 1.8 -2.2 3.2Z" fill="${TONGUE}"/>`;
+        case "smirk":
+            return `<path d="M-3.4 0.8Q0.6 2.6 4 -0.8" ${line}/>`;
+        case "o":
+            return `<ellipse cx="0" cy="1.6" rx="1.6" ry="2" fill="${INK}"/>`;
+        case "frown":
+            // As the calico wears it: down from the nose, then out to either side.
+            return `<path d="M-3.4 2.4Q-1.6 0 0 -0.4Q1.8 0 4.4 3" ${line}/>`;
+        case "tongue":
+            return `<path d="M-1.6 1.2Q0 6.4 1.6 1.2Z" fill="${TONGUE}" stroke="${INK}" stroke-width="${round2(weight * 0.7)}"/><path d="${w}" ${line}/>`;
+        default:
+            return `<path d="${w}" ${line}/>`;
+    }
+}
+/** Places a traced drawing by one point, at a size, and turned. */
+const placed = (from, to, scale = 1, turn = 0) => `translate(${at(to)}) rotate(${round2(turn)}) scale(${round2(scale)}) translate(${point(-from[0], -from[1])})`;
+export function createBuddy(name, overrides, ids = "buddy") {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const character = characterOf(t);
+    const mood = moodOf(t);
+    const gesture = gestureOf(t);
+    const pose = poseOf(t);
+    const { tile, fur, patch } = coloursOf(t, character);
+    const weight = character.weight * t.num("weight", 0.88, 1.12);
+    const line = `stroke="${INK}" stroke-width="${round2(weight)}" stroke-linejoin="round"`;
+    const lines = (d, w = weight) => `<path d="${d}" fill="none" stroke="${INK}" stroke-width="${round2(w)}" stroke-linecap="round" stroke-linejoin="round"/>`;
+    const head = blob(character.head);
+    const lift = t.jitter("eye.y", 1);
+    const eyeSize = t.num("eye.size", 0.88, 1.15);
+    const eyes = mood.eyes
+        .map((kind, i) => {
+        const [x, y] = character.eyes[i];
+        const eye = drawEye(kind, eyeSize, Boolean(character.ovalEyes));
+        const blinks = kind !== "happy" && kind !== "wink" && kind !== "line";
+        return `<g transform="translate(${point(x, y + lift)})"><g data-widen="">${blinks ? `<g data-blink="">${eye}</g>` : eye}</g></g>`;
+    })
+        .join("");
+    const [mx, my, ms, mt] = character.mouth;
+    const mouth = `<g transform="translate(${point(mx, my)}) rotate(${mt}) scale(${ms})">${drawMouth(mood.mouth, weight / ms)}</g>`;
+    const blush = mood.blush
+        ? character.cheeks.map(([x, y]) => `<ellipse cx="${round2(x + (x < 50 ? 3 : -3))}" cy="${round2(y - 4)}" rx="3.6" ry="2" fill="${BLUSH}" fill-opacity="0.75"/>`).join("")
+        : "";
+    const brows = mood.brows
+        ? character.eyes.map(([x, y], i) => `<path d="M${point(x + (i ? 3.6 : -3.6), y - 5.2)}L${point(x + (i ? -2.2 : 2.2), y - 3.8)}" fill="none" stroke="${INK}" stroke-width="${round2(weight * 0.8)}" stroke-linecap="round"/>`).join("")
+        : "";
+    const whiskers = character.whiskers ? lines(character.whiskers, weight * 0.9) : "";
+    // A traced drawing, placed on this face: filled in fur unless it's on the one it was traced from.
+    const drawArt = (art, to, scale, traced, turn = 0) => `<g transform="${placed(art.from, to, scale, turn)}">` +
+        ((art.inOutline && character.name === traced) || !art.fill ? "" : `<path d="${art.fill}" fill="${fur}"/>`) +
+        lines(art.lines, weight / scale) +
+        `</g>`;
+    // The other gestures use the calico's paw, on an arm with an outline.
+    const [shoulderL, shoulderR] = character.shoulders;
+    const [cheekL, cheekR] = character.cheeks;
+    const [eyeL, eyeR] = character.eyes;
+    const armWidth = 10.5 * (character.arms ?? 1);
+    const arm = (from, to, bulge) => {
+        const bend = [(from[0] + to[0]) / 2 + bulge, (from[1] + to[1]) / 2 + 4];
+        const d = `M${at(from)}Q${at(bend)} ${at(to)}`;
+        return `<path d="${d}" fill="none" stroke="${INK}" stroke-width="${round2(armWidth + weight * 2)}" stroke-linecap="round"/><path d="${d}" fill="none" stroke="${fur}" stroke-width="${round2(armWidth)}" stroke-linecap="round"/>`;
+    };
+    const mitten = ([x, y], turn, extra = "") => `<g transform="translate(${point(x, y)}) rotate(${round2(turn)})">${extra}<path d="${MITTEN}" fill="${fur}" ${line}/>${lines(MITTEN_CREASES, weight * 0.85)}</g>`;
+    const reach = (from, to, bulge, turn, extra = "") => arm(from, to, bulge) + mitten(to, turn, extra);
+    const front = (() => {
+        switch (gesture) {
+            case "Cheeks": {
+                const scale = character.arms ?? 1;
+                const paws = CHEEK_PAWS.map((paw, i) => drawArt(paw, character.eyes[i], scale, "Tabby")).join("");
+                // Anyone else needs the outsides of the arms, and only the tabby has its chin.
+                const sides = character.name === "Tabby"
+                    ? lines(TABBY_CHIN)
+                    : CHEEK_SIDES.map((side, i) => `<g transform="${placed(CHEEK_PAWS[i].from, character.eyes[i], scale)}">${lines(side, weight / scale)}</g>`).join("");
+                return paws + sides;
+            }
+            case "Shades": {
+                const [scale, turn] = character.shades;
+                const middle = [(eyeL[0] + eyeR[0]) / 2, (eyeL[1] + eyeR[1]) / 2];
+                const glasses = `<g transform="${placed(SHADES_AT, middle, scale, turn)}"><path d="${LENSES}" fill="${LENS}" stroke="${INK}" stroke-width="${round2(1.3 / scale)}" stroke-linejoin="round"/>` +
+                    `${lines(SHADES_BAR, 2.8)}<path d="${SHADES_GLINT}" fill="none" stroke="${GLINT}" stroke-width="0.9" stroke-linecap="round"/>` +
+                    `<ellipse cx="32" cy="43" rx="1.9" ry="1.2" transform="rotate(15 32 43)" fill="${GLINT}"/><ellipse cx="66.4" cy="45.2" rx="2.1" ry="1.3" transform="rotate(10 66.4 45.2)" fill="${GLINT}"/></g>`;
+                // The paw holds the end of the bar, wherever that falls on this face.
+                const r = (turn * Math.PI) / 180;
+                const dx = (SHADES_END[0] - SHADES_AT[0]) * scale;
+                const dy = (SHADES_END[1] - SHADES_AT[1]) * scale;
+                const end = [middle[0] + dx * Math.cos(r) - dy * Math.sin(r), middle[1] + dx * Math.sin(r) + dy * Math.cos(r)];
+                return glasses + drawArt(SHADES_PAW, end, Math.max(0.8, scale), "Calico");
+            }
+            case "Salute":
+                return drawArt(SALUTE, eyeL, character.arms ?? 1, "");
+            case "Heart": {
+                const [cx, cy] = character.chest;
+                const heart = `<path d="M${point(cx, cy + 3)}C${point(cx - 7, cy - 2)} ${point(cx - 5, cy - 8)} ${point(cx - 2, cy - 7.4)}C${point(cx - 0.8, cy - 7.2)} ${point(cx, cy - 6)} ${point(cx, cy - 5)}C${point(cx, cy - 6)} ${point(cx + 0.8, cy - 7.2)} ${point(cx + 2, cy - 7.4)}C${point(cx + 5, cy - 8)} ${point(cx + 7, cy - 2)} ${point(cx, cy + 3)}Z" fill="${HEART}" ${line}/>`;
+                return heart + reach(shoulderL, [cx - 8, cy - 1], -4, 60) + reach(shoulderR, [cx + 8, cy - 1], 4, -60);
+            }
+            case "Wave": {
+                const hand = [cheekR[0] + 12, cheekR[1] - 16];
+                const marks = lines(`M${point(hand[0] + 8, hand[1] - 7)}q3 3 0 6M${point(hand[0] + 11, hand[1] - 9)}q4.4 4.6 0 9.2`, weight * 0.8);
+                return reach(shoulderR, hand, 8, 12) + marks;
+            }
+            case "Shy": {
+                // Both paws held together under the chin.
+                const x = (cheekL[0] + cheekR[0]) / 2;
+                const y = Math.max(cheekL[1], cheekR[1]) + 12;
+                return reach(shoulderL, [x - 5.4, y], -5, 50) + reach(shoulderR, [x + 5.4, y], 5, -50);
+            }
+            case "Peace": {
+                // Two fingers up from the paw.
+                const finger = (d) => `<path d="${d}" fill="none" stroke="${INK}" stroke-width="${round2(4.4 + weight * 2)}" stroke-linecap="round"/><path d="${d}" fill="none" stroke="${fur}" stroke-width="4.4" stroke-linecap="round"/>`;
+                const fingers = finger("M-2.6 -6L-4.8 -14.6") + finger("M2.6 -6L5.4 -14");
+                return reach(shoulderR, [cheekR[0] + 10, cheekR[1] - 2], 6, 0, fingers);
+            }
+            default:
+                return "";
+        }
+    })();
+    return scopeAll({
+        defs: `<clipPath id="buddy-head"><path d="${head}"/></clipPath><clipPath id="buddy-body"><path d="${character.body || head}"/></clipPath>`,
+        tile,
+        pose: `${pose.transform} rotate(${round2(t.jitter("tilt", 5))} 50 100) ${character.frame}`.trim(),
+        mirrored: Boolean(pose.mirrored),
+        ears: ["", ""],
+        body: (character.body ? `<path d="${character.body}" fill="${fur}" ${line}/>` : "") +
+            `<path d="${head}" fill="${fur}" ${line}/>${character.markings(fur, patch)}${character.details?.(fur, patch, weight) ?? ""}`,
+        eyes,
+        face: (character.nose?.(fur, weight) ?? "") + mouth + blush + brows + whiskers,
+        front,
+        blinkDelay: t.num("blink", 0, 4),
+    }, "buddy", ids);
+}
+export const TILE_SHAPE = `<rect width="100" height="100" rx="22.22"/>`;
+/** The buddy at rest, for thumbnails. */
+export const buddySvg = (name, overrides) => {
+    const b = createBuddy(name, overrides);
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs>${b.defs}<clipPath id="buddy-tile">${TILE_SHAPE}</clipPath></defs>` +
+        TILE_SHAPE.replace("/>", ` fill="${b.tile}"/>`) +
+        `<g clip-path="url(#buddy-tile)"><g transform="${b.pose}">${b.body}${b.face}${b.eyes}${b.front}</g></g></svg>`);
+};

package/dist/colors.d.ts

@@ -0,0 +1,20 @@
+/** The sums behind colours picked by hand. Generators hold their own designed palettes. */
+/** Hue in degrees, then saturation and brightness from 0 to 1. */
+export interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+}
+export declare const BLACK = "#000000";
+export declare const WHITE = "#ffffff";
+export declare const isHex: (value: string) => boolean;
+export declare const hexToInt: (hex: string) => number;
+export declare const intToHex: (value: number) => string;
+/** Part of the way from `hex` to `target`, for shades of a picked colour. */
+export declare function mix(hex: string, target: string, amount: number): string;
+export declare function hsvToHex({ h, s, v }: Hsv): string;
+export declare function hexToHsv(hex: string): Hsv;
+/** Black or white, whichever reads better on `hex`. */
+export declare const inkOn: (hex: string) => "#000000" | "#ffffff";
+/** The WCAG contrast ratio, from 1 for the same colour to 21 for black on white. */
+export declare function contrast(a: string, b: string): number;

package/dist/colors.js

@@ -0,0 +1,41 @@
+/** The sums behind colours picked by hand. Generators hold their own designed palettes. */
+export const BLACK = "#000000";
+export const WHITE = "#ffffff";
+export const isHex = (value) => /^#[0-9a-f]{6}$/i.test(value);
+export const hexToInt = (hex) => parseInt(hex.slice(1), 16);
+export const intToHex = (value) => `#${value.toString(16).padStart(6, "0")}`;
+const channels = (hex) => [1, 3, 5].map((start) => parseInt(hex.slice(start, start + 2), 16));
+const fromChannels = (values) => `#${values.map((v) => Math.round(v).toString(16).padStart(2, "0")).join("")}`;
+/** Part of the way from `hex` to `target`, for shades of a picked colour. */
+export function mix(hex, target, amount) {
+    const to = channels(target);
+    return fromChannels(channels(hex).map((v, i) => v + (to[i] - v) * amount));
+}
+export function hsvToHex({ h, s, v }) {
+    const channel = (n) => {
+        const k = (n + h / 60) % 6;
+        return (v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255;
+    };
+    return fromChannels([channel(5), channel(3), channel(1)]);
+}
+export function hexToHsv(hex) {
+    const [r, g, b] = channels(hex).map((v) => v / 255);
+    const max = Math.max(r, g, b);
+    const range = max - Math.min(r, g, b);
+    const sector = range === 0 ? 0 : max === r ? ((g - b) / range + 6) % 6 : max === g ? (b - r) / range + 2 : (r - g) / range + 4;
+    return { h: sector * 60, s: max === 0 ? 0 : range / max, v: max };
+}
+function luminance(hex) {
+    const [r, g, b] = channels(hex).map((v) => {
+        const unit = v / 255;
+        return unit <= 0.04045 ? unit / 12.92 : ((unit + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** Black or white, whichever reads better on `hex`. */
+export const inkOn = (hex) => (luminance(hex) > 0.179 ? BLACK : WHITE);
+/** The WCAG contrast ratio, from 1 for the same colour to 21 for black on white. */
+export function contrast(a, b) {
+    const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (light + 0.05) / (dark + 0.05);
+}

package/dist/combinations.d.ts

@@ -0,0 +1,9 @@
+/** How many distinct looks a type offers, for showing beside the selected avatar. */
+import type { AvatarKind } from "./kinds.ts";
+/**
+ * Every choice the panel offers, multiplied together. A control that appears only with
+ * some looks counts too, at its largest. Sliders are left out, as they have no count.
+ */
+export declare function combinations(kind: AvatarKind): number;
+/** "383.2 million combinations", as a person would say it. */
+export declare const combinationsLabel: (count: number) => string;

package/dist/combinations.js

@@ -0,0 +1,28 @@
+/** How many distinct looks a type offers, for showing beside the selected avatar. */
+/** Enough names that controls shown only for some looks are all seen. */
+const SAMPLE = 60;
+const known = new Map();
+/**
+ * Every choice the panel offers, multiplied together. A control that appears only with
+ * some looks counts too, at its largest. Sliders are left out, as they have no count.
+ */
+export function combinations(kind) {
+    const cached = known.get(kind.id);
+    if (cached !== undefined)
+        return cached;
+    const options = new Map();
+    for (let i = 0; i < SAMPLE; i++) {
+        const name = i === 0 ? kind.defaultName : `${kind.defaultName}-${i}`;
+        for (const control of kind.controls(name, {}).flatMap((section) => section.controls)) {
+            if (control.type !== "choice")
+                continue;
+            options.set(control.id, Math.max(options.get(control.id) ?? 1, control.options.length));
+        }
+    }
+    const total = [...options.values()].reduce((product, count) => product * count, 1);
+    known.set(kind.id, total);
+    return total;
+}
+const compact = new Intl.NumberFormat("en", { notation: "compact", compactDisplay: "long", maximumFractionDigits: 1 });
+/** "383.2 million combinations", as a person would say it. */
+export const combinationsLabel = (count) => `${compact.format(count)} combination${count === 1 ? "" : "s"}`;

package/dist/container.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The card a 3D avatar sits on, as a peek sits on its tile. It's off until switched on,
+ * and its size and colour are set by hand, never from the name.
+ */
+import { type Control } from "./controls.ts";
+import type { Traits } from "./traits.ts";
+import type { AvatarParts } from "./types.ts";
+/** Every avatar starts on the first, and the rest are offered beside it. */
+export declare const CONTAINERS: string[];
+export declare function containerOf(t: Traits): AvatarParts["container"];
+/** The switch, then its size and colour while it's on. */
+export declare function containerControls(t: Traits): Control[];
+/** A still picture's art on its card, clipped to it, or as it was with no card. */
+export declare function inContainer(art: string, container: AvatarParts["container"], id: string): string;

package/dist/container.js

@@ -0,0 +1,67 @@
+/**
+ * The card a 3D avatar sits on, as a peek sits on its tile. It's off until switched on,
+ * and its size and colour are set by hand, never from the name.
+ */
+import { fixedPalette } from "./controls.js";
+/** Every avatar starts on the first, and the rest are offered beside it. */
+export const CONTAINERS = [
+    "#17181c", "#e6e1ff", "#1f2a44", "#d6f0ff", "#3a2346", "#ffe4d6", "#163a33", "#fff1c4", "#ffd8e6",
+];
+/** Its side as a share of the slot, from its slider's position. */
+const RANGE = [0.5, 1];
+const POSITION = 0.8;
+const sizeAt = (position) => RANGE[0] + (RANGE[1] - RANGE[0]) * position;
+/** Its corner radius as a share of its side, the same as a peek's tile. */
+const CORNER = 0.22;
+/** How much of it the avatar fills in a still picture, leaving the same margin as in 3D. */
+const FILL = 0.86;
+const round2 = (value) => Math.round(value * 100) / 100;
+const shown = (t) => (t.forced("container") ?? 1) < 0.5;
+export function containerOf(t) {
+    if (!shown(t))
+        return undefined;
+    return {
+        size: sizeAt(t.forced("container.size") ?? POSITION),
+        color: t.color("container.color") ?? CONTAINERS[0],
+    };
+}
+/** The switch, then its size and colour while it's on. */
+export function containerControls(t) {
+    const on = shown(t);
+    const toggle = {
+        type: "choice",
+        id: "container",
+        label: "Container",
+        layout: "switch",
+        options: [
+            { id: "on", label: "On", set: { container: 0 } },
+            { id: "off", label: "Off", set: { container: undefined } },
+        ],
+        selected: on ? "on" : "off",
+    };
+    if (!on)
+        return [toggle];
+    const position = t.forced("container.size") ?? POSITION;
+    const size = {
+        type: "slider",
+        id: "container.size",
+        label: "Container size",
+        value: position,
+        display: `${Math.round(sizeAt(position) * 100)}%`,
+        range: [RANGE[0] * 100, RANGE[1] * 100],
+    };
+    return [toggle, size, fixedPalette(t, "container.color", "Container colour", CONTAINERS)];
+}
+/** A still picture's art on its card, clipped to it, or as it was with no card. */
+export function inContainer(art, container, id) {
+    const open = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">`;
+    if (!container)
+        return `${open}${art}</svg>`;
+    const side = round2(container.size * 100);
+    const card = `<rect x="${round2(50 - side / 2)}" y="${round2(50 - side / 2)}" width="${side}" height="${side}" rx="${round2(side * CORNER)}"/>`;
+    return (open +
+        `<clipPath id="${id}">${card}</clipPath>` +
+        card.replace("/>", ` fill="${container.color}"/>`) +
+        `<g clip-path="url(#${id})"><g transform="translate(50 50) scale(${round2(container.size * FILL)}) translate(-50 -50)">${art}</g></g>` +
+        `</svg>`);
+}