@originkit/avatars 0.0.0-stage → 0.1.0

package/dist/kitties/index.js

@@ -0,0 +1,673 @@
+/**
+ * Cats, traced from the reference: a black cat in three-quarter view, its head tipped and
+ * coming in from the corner. Its ears have rounded tips and edges that bulge a little, and
+ * a dark inner ear. Each eye is an ellipse cut straight across by the lid through its
+ * middle, so the corner by the nose is sharp and the outer end round, and the lid's angle
+ * is most of the mood. The nose sits off towards the far eye, and the mouth is a thick
+ * grey line, longer on the near side, with a single fang.
+ *
+ * There are two views, each traced from its own reference: turned three-quarters, and nearly
+ * face on with a pink nose and an open mouth. Points are in tile units, traced from 1200 px
+ * drawings at a twelfth of their size. The face is drawn upright about the nose, then turned
+ * with the head by the view's tilt.
+ */
+import { mix, WHITE } from "../colors.js";
+import { calmed } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+export const TILES = ["#2fe370", "#ffd23f", "#ff5fa2", "#3fa9ff", "#ff8a2b", "#9b6bff", "#ff4b4b", "#16c8b0", "#b6f03c"];
+export const FURS = ["#050505", "#26262b", "#4a4a55", "#e0893b", "#7a5136"];
+export const EYE_COLOURS = ["#f3f7f3", "#ffe14d", "#c8f55a", "#8fe0ff", "#ffb347"];
+const TONGUE = "#ff7aa8";
+const round2 = (value) => Math.round(value * 100) / 100;
+const point = (x, y) => `${round2(x)} ${round2(y)}`;
+const at = ([x, y]) => point(x, y);
+const lerp = (a, b, k) => [a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k];
+const polygon = (points) => `M${points.map(at).join("L")}Z`;
+const distance = (a, b) => Math.hypot(b[0] - a[0], b[1] - a[1]);
+const ellipse = ([x, y], rx, ry, turn, fill) => `<ellipse cx="${round2(x)}" cy="${round2(y)}" rx="${round2(rx)}" ry="${round2(ry)}" transform="rotate(${round2(turn)} ${point(x, y)})" fill="${fill}"/>`;
+/** Turns a vector clockwise on screen, in degrees. */
+function turned([x, y], degrees) {
+    const r = (degrees * Math.PI) / 180;
+    return [x * Math.cos(r) - y * Math.sin(r), x * Math.sin(r) + y * Math.cos(r)];
+}
+/** A closed curve through every point, as a Catmull-Rom spline. */
+function smooth(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`;
+}
+/** Neighbours are as unlike as possible, since each variant steps to the next. */
+export const VIEWS = [
+    {
+        // Turned three-quarters, the head tipped and in from the corner, with a grey nose.
+        name: "Three-quarter",
+        centre: [55, 58],
+        nose: [42.8, 57.2],
+        tilt: -18,
+        frame: "",
+        head: [
+            [14.5, 46], [22, 37.5], [33, 31.5], [48, 26.5], [63, 25.5], [77.5, 28.8], [86.7, 37.5], [90.8, 46.7], [91.7, 54.2],
+            [90.8, 61], [87.5, 69.5], [80, 77], [62, 85], [45, 90], [35.8, 90], [27.5, 87.5], [19, 81.7], [12.8, 73.3], [10.8, 63.3], [11.6, 54],
+        ],
+        cheeks: [7, 8, 9, 10, 15, 16, 17, 18, 19],
+        // A straight neck down the left, and the shoulder running off to the right.
+        body: [[35.8, 88], [35, 130], [130, 130], [130, 112], [100, 84], [86.7, 70.4]],
+        ears: [
+            { inner: [29.2, 32.9], tip: [6.2, 29], outer: [12.3, 52.9] },
+            { inner: [47.9, 25.8], tip: [60.2, 6.2], outer: [77.5, 28.8] },
+        ],
+        whiskers: [
+            [[22.7, 65.8], [10.5, 64.6], [0.8, 66.7]],
+            [[22.9, 69.2], [11.5, 71.3], [0.8, 77.9]],
+            [[24, 73.2], [14.5, 78.2], [6.8, 86.3]],
+            [[70, 51.3], [83, 42.8], [94.2, 37.3]],
+            [[71.7, 55.4], [85, 51], [98.5, 49.2]],
+            [[73.3, 59.2], [86, 59.2], [95, 62.7]],
+        ],
+        eyes: [
+            { c: [-14.1, -6.6], rx: 9.4, ry: 7.2 },
+            { c: [20.4, -6.6], rx: 11.6, ry: 8.6 },
+        ],
+        noseShape: "M-2.9 -0.7Q0 -2 3 -1Q3.4 -0.4 2.5 0.5L0.6 1.7Q-0.2 2.2 -1.1 1.5L-2.7 0.3Q-3.4 -0.2 -2.9 -0.7Z",
+        noseTint: [WHITE, 0.17],
+        earTint: [WHITE, 0.2],
+    },
+    {
+        // Nearly face on and close up, cropped at the top and right, with a pink nose and lilac ears.
+        name: "Front",
+        centre: [66, 55],
+        nose: [55.8, 57],
+        tilt: 1,
+        frame: "translate(-2 1) translate(66 55) scale(0.95) translate(-66 -55)",
+        head: [
+            [31.7, 26.7], [45, 17.5], [61, 13.5], [75, 12.5], [84, 14.5], [96, 19], [106, 26], [112, 40], [114, 55],
+            [112, 70], [105, 82], [90, 90], [70, 93], [50, 90], [36, 83], [27, 76], [21.5, 67], [19.6, 58], [20.5, 48], [24.5, 37.5],
+        ],
+        cheeks: [8, 9, 10, 15, 16, 17, 18, 19],
+        body: [[35, 82], [24.5, 130], [130, 130], [130, 60], [105, 82]],
+        ears: [
+            { inner: [61, 13.5], tip: [41.5, -1], outer: [31.7, 27.5] },
+            { inner: [84, 14.5], tip: [110, -6], outer: [108, 30] },
+        ],
+        whiskers: [
+            [[31.9, 57.9], [20, 54.3], [9.2, 51]],
+            [[31.3, 62.1], [20, 61.9], [8.8, 61.7]],
+            [[31, 66.4], [21, 69], [10.8, 71.7]],
+            [[87.5, 61.7], [94, 60.4], [104, 58.5]],
+            [[88.3, 66.3], [95, 66.9], [104, 67.8]],
+            [[87.5, 70.8], [94, 73.4], [104, 77]],
+        ],
+        eyes: [
+            { c: [-14.9, -7.6], rx: 9.5, ry: 7.4 },
+            { c: [23.8, -7], rx: 12.4, ry: 8.4 },
+        ],
+        noseShape: "M-3.3 -1.3Q0 -2 3.3 -1.3Q3.9 -0.8 3.1 0L0.9 1.6Q0 2.2 -0.9 1.6L-3.1 0Q-3.9 -0.8 -3.3 -1.3Z",
+        noseTint: ["#f27ba3", 1],
+        earTint: ["#9b87b0", 0.42],
+        greyWhiskers: true,
+        tallPupils: true,
+    },
+];
+/** The first is the reference, in from the corner. */
+export const POSES = [
+    { name: "Corner", x: 0, y: 0, scale: 1, turn: 0 },
+    { name: "Other corner", x: 0, y: 0, scale: 1, turn: 0, mirrored: true },
+    { name: "Centre", x: -6, y: -2, scale: 0.78, turn: 8 },
+    { name: "Peeking", x: -4, y: 24, scale: 0.9, turn: 10 },
+    { name: "Close up", x: 4, y: 6, scale: 1.25, turn: 2 },
+    { name: "Tilted", x: 2, y: 2, scale: 0.95, turn: -12 },
+];
+/** Neighbours are as unlike as possible, since each variant steps to the next. */
+export const EARS = [
+    { name: "Classic", height: 1, flare: 0, round: 3.4 },
+    { name: "Folded", height: 0.5, flare: -12, round: 4.6, folded: true },
+    { name: "Tall", height: 1.32, flare: -4, round: 2.2 },
+    { name: "Notched", height: 1, flare: 0, round: 3.2, notch: true },
+    { name: "Short", height: 0.72, flare: 8, round: 3.6 },
+    { name: "Tufted", height: 1.12, flare: 0, round: 1.6, tuft: true },
+    { name: "Mismatched", height: 1, flare: 0, round: 3.4, odd: true },
+    { name: "Wide", height: 0.9, flare: 16, round: 3 },
+];
+/**
+ * The owl, traced from its own reference, at a twelfth and a half of 1254 px: one big round
+ * head on a broad body, with a notch at the neck either side, and horn-like tufts sweeping
+ * out from the top corners. Its "ears" are the tufts, by where they leave the head (the top
+ * edge, then the lower) and their tips.
+ */
+const OWL_VIEW = {
+    name: "Owl",
+    centre: [50.5, 53],
+    // Where the beak meets the face, which the face hangs from.
+    nose: [47.6, 54.5],
+    tilt: -10,
+    frame: "",
+    head: [
+        [28.5, 31], [40, 24], [55, 21.5], [64.5, 22.3], [76, 26.5], [85, 34], [89.5, 44], [90.6, 52], [88.5, 62], [82, 70.5],
+        [65, 78], [40, 80], [23.5, 77], [15.5, 70], [11, 60], [10.6, 52], [12, 45.5], [18, 37],
+    ],
+    cheeks: [],
+    body: [[23.5, 76], [20.5, 92], [19.2, 130], [130, 130], [130, 118], [100, 95], [90, 80], [82, 70.5]],
+    ears: [
+        { inner: [28.5, 31], tip: [6, 27], outer: [12, 45.5] },
+        { inner: [64.5, 22.3], tip: [85.5, 12.8], outer: [85, 34] },
+    ],
+    whiskers: [],
+    eyes: [
+        { c: [-15.7, -6.6], rx: 10.8, ry: 9.4 },
+        { c: [17.6, -7.4], rx: 12.4, ry: 10 },
+    ],
+    noseShape: "",
+    noseTint: [WHITE, 0.9],
+    earTint: [WHITE, 0.2],
+};
+/**
+ * The dog, traced from its own reference at a twelfth and a half of 1254 px. It's turned
+ * three-quarters to the right, so its white muzzle stands out that side, with the far eye
+ * smaller beside it. Two big upright ears, very round at the tip, and the far cheek bulging
+ * below the left one. Its neck wears a collar.
+ */
+const DOG_VIEW = {
+    name: "Dog",
+    centre: [52, 50],
+    nose: [65.6, 53.8],
+    tilt: -12,
+    frame: "",
+    head: [
+        [41, 29.5], [48, 27.5], [55.8, 26.3], [66, 30], [79.3, 39], [84, 44], [87.3, 51.8], [86, 58], [81, 64], [74.6, 68.6],
+        [66, 73], [50, 75], [35, 73.5], [30, 72], [26.3, 67.4], [21, 70.2], [16.6, 66], [16, 60], [17.9, 55], [20, 48], [25, 40], [33, 33.5],
+    ],
+    cheeks: [],
+    body: [[30, 72], [28.3, 79.7], [16, 100], [13, 130], [86, 130], [82.1, 100], [74.2, 76.6], [74.6, 68.6]],
+    ears: [
+        { inner: [41, 29.5], tip: [23, 19.5], outer: [17.9, 55] },
+        { inner: [55.8, 26.3], tip: [70.5, 12.8], outer: [79.3, 39] },
+    ],
+    whiskers: [],
+    eyes: [
+        { c: [-20, -8.7], rx: 9.7, ry: 7.8 },
+        { c: [6.5, -9.1], rx: 7.6, ry: 6.2 },
+    ],
+    noseShape: "M-4.8 -1.6Q-4.6 -3.3 0 -3.3Q4.8 -3.3 5 -1.6Q5 1 2.4 2.6Q0.6 3.4 -0.4 3.2Q-2.6 2.8 -4.2 0.8Q-5 -0.4 -4.8 -1.6Z",
+    noseTint: [WHITE, 0],
+    earTint: [WHITE, 0.22],
+};
+/** The dog's white muzzle, in the face's frame, round the nose and out to the near side. */
+const DOG_MUZZLE = [[-23.7, 6], [-19.7, 3.2], [-7.8, -2.9], [0.55, -3.6], [7.3, -1.3], [9.6, 4.1], [6.7, 11.8], [0.3, 16.8], [-13.4, 16], [-22.1, 11.2]];
+/** Its smug mouth: a short line down from the nose, then a long curve to the near side. */
+const DOG_SMIRK = "M0.6 3.2Q0.6 4.6 -0.4 5Q-3 8.6 -6.8 8Q-10.6 7.4 -12.4 4.6Q-12.8 4 -13.2 3.6M1.2 4.2Q2 7 3.4 7.6Q4.4 8.1 5.4 8";
+/** A fang under the long side of that smirk, shown only when it means it. */
+const DOG_FANG = "M-6.2 8.1L-9.8 7.4Q-9.5 10.8 -8.4 12Q-7.9 12.5 -7.5 11.8Q-6.6 10 -6.2 8.1Z";
+const MUZZLE = "#f5f5f5";
+/** The collar round the dog's neck, and the bone on its tag, in tile units. */
+const COLLAR = "M30.5 73.8Q52 83.4 74.2 73.4L74.2 76.6Q51 91 30.7 77.8Z";
+const BONE = "M-4.6 -1.2H4.6A1.9 1.9 0 1 1 5.6 1.8L5.6 1.8A1.9 1.9 0 1 1 4.6 1.2H-4.6A1.9 1.9 0 1 1 -5.6 -1.8L-5.6 -1.8A1.9 1.9 0 1 1 -4.6 -1.2Z";
+/** Collars come in a few colours; the first is the reference's grey, taken from the fur. */
+export const COLLARS = ["", "#e2364c", "#2f7df6", "#f5b700", "#7a4fd6", "#16b38a"];
+/** A tiger's head, which is the same either side: the left half is traced, the right mirrors it. */
+const mirrored = (points) => points.map(([x, y]) => [100 - x, y]);
+const TIGER_HALF = [[43, 25.5], [30, 27], [21, 33], [16.5, 40], [15.5, 48], [15.5, 56], [18, 63], [23, 69], [28.7, 75.8], [38, 80]];
+const TIGER_WHISKERS = [
+    [[37.5, 48.4], [25, 48.8], [13.2, 50.6]],
+    [[37, 51.8], [24.5, 53.4], [12.8, 56.2]],
+    [[37.5, 55], [25.5, 58.4], [14.4, 63]],
+];
+/**
+ * The tiger, traced from its own reference at a twelfth and a half of 1254 px: face on,
+ * with big pointed ears, white inside, a ruff of spikes at each cheek, and grey stripes.
+ * Its eyes glare in towards a grey nose, over two white whisker pads and a white chin.
+ */
+const TIGER_VIEW = {
+    name: "Tiger",
+    centre: [50, 50],
+    nose: [50, 45.8],
+    tilt: 0,
+    frame: "",
+    head: [[50, 25], ...mirrored(TIGER_HALF), [50, 81], ...[...TIGER_HALF].reverse()],
+    cheeks: [],
+    body: [[28.7, 74], [21.5, 100], [19.5, 130], [80.5, 130], [78.5, 100], [71.3, 74]],
+    ears: [
+        { inner: [43, 25.5], tip: [23, 12], outer: [17.5, 37] },
+        { inner: [57, 25.5], tip: [77, 12], outer: [82.5, 37] },
+    ],
+    whiskers: [...TIGER_WHISKERS, ...TIGER_WHISKERS.map(mirrored)],
+    eyes: [
+        { c: [-14.1, -8.7], rx: 9.2, ry: 7.2 },
+        { c: [14.1, -8.7], rx: 9.2, ry: 7.2 },
+    ],
+    noseShape: "M-4.6 -2.4Q0 -2.9 4.6 -2.4Q5.2 -2.1 4.7 -1.4L0.9 2.4Q0 3.2 -0.9 2.4L-4.7 -1.4Q-5.2 -2.1 -4.6 -2.4Z",
+    noseTint: [WHITE, 0.33],
+    earTint: [WHITE, 1],
+    pupilsIn: true,
+};
+/** Drawn on the left in tile units, and again mirrored on the right. */
+const bothSides = (d, paint) => `<path d="${d}" ${paint}/><path d="${d}" transform="translate(100 0) scale(-1 1)" ${paint}/>`;
+/** The tiger's cheek ruffs, stripes, brows, the flicks of fur between its ears, and its chest. */
+const TIGER_SPIKES = "M16.6 39.5L8.9 45.9L15.6 49ZM15.4 51.5L8.4 56.2L16 60Z";
+const TIGER_STRIPES = "M16.5 44.5L21.5 40.8L22.8 46.5L27.8 43.5M19.8 64L24.5 60.5L26 67L32 63.5";
+const TIGER_BROWS = "M32.3 30.4Q35 31.2 36.8 33.6M35.5 29.2Q38 30.6 39.2 33.6";
+const TIGER_FLICKS = "M41.3 19.8Q43.4 21.4 43 24.2";
+const TIGER_CHEST = "M27.9 88.2Q50 76.5 72.1 88.2Q74 95 74.6 102L25.4 102Q26 95 27.9 88.2Z";
+/** A whisker pad, in the face's frame, left of the nose; the right is its mirror. */
+const TIGER_PAD = "M0 3.2Q-2 0.8 -7 0.6Q-14.5 0.6 -17.6 4.6Q-17.4 9.8 -12 11.6Q-5.4 12.8 -1.4 9.6Q0.6 7.2 0 3.2Z";
+/** The animals. Neighbours are as unlike as possible. */
+export const SPECIES = [
+    { name: "Cat", ears: "point", nose: "cat", whiskers: true, fangs: true },
+    { name: "Dog", ears: "point", head: "dog", cheeks: "Smooth", nose: "dog", fangs: true, view: DOG_VIEW, earRound: 8, earBulge: 3.6 },
+    { name: "Owl", ears: "tuft", head: "owl", cheeks: "Smooth", nose: "beak", view: OWL_VIEW },
+    { name: "Bear", ears: "round", nose: "bear", cheeks: "Chubby" },
+    { name: "Tiger", ears: "point", head: "tiger", cheeks: "Smooth", nose: "tiger", whiskers: true, fangs: true, view: TIGER_VIEW, earInset: 0.14 },
+];
+const BEAK = "#f1f1f1";
+export const FUR_STYLES = [{ name: "Smooth" }, { name: "Fluffy" }, { name: "Chubby" }];
+/** Every expression. The first two are the references. */
+export const MOODS = [
+    { name: "Annoyed", lids: [[20, 0], [20, 0]], pupil: "none", mouth: "none", fangs: 1 },
+    { name: "Smug", lids: [[10, 0], [10, 0]], pupil: "hang", mouth: "smirk", fangs: 1 },
+    { name: "Curious", lids: ["open", "open"], pupil: "big", mouth: "w" },
+    { name: "Sleepy", lids: ["closed", "closed"], pupil: "none", mouth: "flat" },
+    { name: "Happy", lids: ["happy", "happy"], pupil: "none", mouth: "smile" },
+    { name: "Shocked", lids: ["open", "open"], pupil: "tiny", mouth: "oh" },
+    { name: "Sly", lids: ["closed", [6, 0.1]], pupil: "hang", mouth: "smirk", fangs: 1 },
+    { name: "Grumpy", lids: [[-7, 0.28], [-7, 0.28]], pupil: "hang", mouth: "frown" },
+    { name: "Hungry", lids: ["open", "open"], pupil: "big", mouth: "tongue" },
+    { name: "Smitten", lids: [[3, 0.12], [3, 0.12]], pupil: "heart", mouth: "w" },
+    { name: "Menacing", lids: [[27, -0.05], [27, -0.05]], pupil: "slit", mouth: "smirk", fangs: 2 },
+    { name: "Dizzy", lids: ["open", "open"], pupil: "cross", mouth: "oh" },
+    { name: "Sassy", lids: [[15, 0], [15, 0]], pupil: "hang", mouth: "open", fangs: 1 },
+];
+/** In the face's frame: the nose at 0 0, the near side to the right. */
+const MOUTHS = {
+    none: "",
+    smirk: "M-14.9 6.9Q-12.8 11 -9.1 10.7Q-3.5 10.2 -0.3 6.6Q6.5 11.2 13.4 11.2Q19.4 10.8 19.9 6.1",
+    w: "M-7 5.6Q-4.6 9.4 -0.4 5.8Q4.4 10 9.4 5.8",
+    smile: "M-10 5.8Q-5.5 12 -0.4 7.4Q6 13.6 14 6",
+    frown: "M-6.5 10.4Q2 4.6 10.5 10.4",
+    flat: "M-4.5 8.6Q2 9.6 8.5 8.4",
+    oh: "",
+    tongue: "M-7 5.6Q-4.6 9.4 -0.4 5.8Q4.4 10 9.4 5.8",
+    // Wide open, off to the near side, with a dip in the lip under the nose.
+    open: "M-7.3 8Q-3 4.6 0.4 5.6Q2.4 7.4 5.4 7Q13 6.4 19.6 7.2Q19.8 14.6 15 19.4Q11 22.4 6.7 22.2Q0.6 22 -3.8 17.6Q-7.6 13.4 -7.3 8Z",
+};
+const MOUTH_INSIDE = "#d43369";
+/** The fang hangs from the near side of the mouth, its outer edge the straighter. */
+const FANG = "M9.4 10.7L14.6 11.3Q14.4 15.2 12.8 16.4Q12.1 16.9 11.6 16.1Q10.2 13.6 9.4 10.7Z";
+const FAR_FANG = "M-5.2 10.1L-8.6 10.6Q-8.4 13.6 -7.3 14.4Q-6.8 14.7 -6.5 14.2Q-5.7 12.3 -5.2 10.1Z";
+const OPEN_FANG = "M11.6 8.1L15.2 7.8Q14.8 11.8 13.8 14Q13.3 14.8 12.8 13.9Q12.1 11.4 11.6 8.1Z";
+export const viewOf = (t) => t.pick("view", VIEWS);
+export const speciesOf = (t) => t.pick("animal", SPECIES);
+export const moodOf = (t) => t.pick("mood", MOODS);
+export const poseOf = (t) => t.pick("pose", POSES);
+export const earsOf = (t) => t.pick("ears", EARS);
+export const furStyleOf = (t) => t.pick("fur.style", FUR_STYLES);
+export function coloursOf(t) {
+    return {
+        tile: t.color("tile") ?? t.pick("tile", TILES),
+        fur: t.color("fur") ?? FURS[0],
+        eye: t.color("eyes.color") ?? EYE_COLOURS[0],
+    };
+}
+/** An ear, its rounded tip and bulging edges, and its dark inside. */
+function drawEar(inner, tip, outer, centre, style, fur, shade, bulge = 1.7, inset = 0) {
+    const middle = lerp(inner, outer, 0.5);
+    const centroid = [(inner[0] + tip[0] + outer[0]) / 3, (inner[1] + tip[1] + outer[1]) / 3];
+    // Each edge bows outwards, away from the middle of the ear.
+    const bowed = (from, to, by) => {
+        const mid = lerp(from, to, 0.5);
+        const away = distance(mid, centroid) || 1;
+        return [mid[0] + ((mid[0] - centroid[0]) / away) * by, mid[1] + ((mid[1] - centroid[1]) / away) * by];
+    };
+    const a = lerp(tip, inner, Math.min(0.4, style.round / distance(tip, inner)));
+    const b = lerp(tip, outer, Math.min(0.4, style.round / distance(tip, outer)));
+    const outerEdge = style.notch
+        ? (() => {
+            // A bite out of the outer edge, a little way down from the tip.
+            const dent = lerp(lerp(b, outer, 0.42), centroid, 0.22);
+            return `L${at(lerp(b, outer, 0.32))}L${at(dent)}L${at(lerp(b, outer, 0.52))}L${at(outer)}`;
+        })()
+        : `Q${at(bowed(b, outer, bulge + 0.1))} ${at(outer)}`;
+    const inside = lerp(middle, centre, 0.3);
+    const ear = `<path d="M${at(inner)}Q${at(bowed(inner, a, bulge - 0.1))} ${at(a)}Q${at(tip)} ${at(b)}${outerEdge}L${at(inside)}Z" fill="${fur}"/>`;
+    // A very round tip would leave the lining poking out of it, so its point drops lower.
+    const liningTip = style.round > 4 ? 0.17 + (style.round - 4) * 0.06 : 0.17;
+    const lining = style.folded
+        ? ""
+        : `<path d="${polygon([lerp(tip, centroid, liningTip + inset), lerp(inner, centroid, 0.42 + inset), lerp(outer, centroid, 0.3 + inset)])}" fill="${shade}" stroke="${shade}" stroke-width="1.4" stroke-linejoin="round"/>`;
+    const tufts = style.tuft
+        ? [-12, 0, 12]
+            .map((spread) => {
+            const [x, y] = turned([tip[0] - middle[0], tip[1] - middle[1]], spread);
+            const length = Math.hypot(x, y);
+            return `M${at(tip)}l${point((x / length) * 4.2, (y / length) * 4.2)}`;
+        })
+            .join("")
+        : "";
+    return ear + lining + (tufts ? `<path d="${tufts}" stroke="${fur}" stroke-width="0.9" stroke-linecap="round" fill="none"/>` : "");
+}
+/** A bear's ear, placed by the same three points as a cat's. */
+function drawRoundEar(inner, tip, outer, style, fur, shade) {
+    const middle = lerp(inner, outer, 0.5);
+    const base = distance(inner, outer);
+    {
+        const r = base * 0.42 * Math.sqrt(style.height) * (style.folded ? 0.8 : 1);
+        const [x, y] = lerp(middle, tip, 0.3);
+        return (`<circle cx="${round2(x)}" cy="${round2(y)}" r="${round2(r)}" fill="${fur}"/>` +
+            (style.folded ? "" : `<circle cx="${round2(x)}" cy="${round2(y)}" r="${round2(r * 0.55)}" fill="${shade}"/>`));
+    }
+}
+/**
+ * An owl's tuft, from where it leaves the head to its rounded tip, and a grey crescent inside
+ * it, from near the tip back towards the head. A folded one droops, plain.
+ */
+function drawOwlTuft(inner, tip, outer, centre, style, fur, grey) {
+    const tuft = drawEar(inner, tip, outer, centre, { ...style, folded: true }, fur, grey, 1.3);
+    if (style.folded)
+        return tuft;
+    const centroid = [(inner[0] + tip[0] + outer[0]) / 3, (inner[1] + tip[1] + outer[1]) / 3];
+    const from = lerp(tip, outer, 0.1);
+    const to = lerp(outer, inner, 0.52);
+    const bend = lerp(lerp(tip, outer, 0.6), centroid, 0.05);
+    const back = lerp(bend, inner, 0.5);
+    return tuft + `<path d="M${at(from)}Q${at(bend)} ${at(to)}Q${at(back)} ${at(from)}Z" fill="${grey}"/>`;
+}
+/**
+ * What shows of an eye:/**
+ * What shows of an eye: the ellipse below the lid, its straight top the lid's edge. Drawn
+ * as one shape, so no fur is laid over the white and no seam shows round the hidden half.
+ */
+function eyeShape(lid, rx, ry, inner) {
+    if (typeof lid === "string")
+        return `M${point(-rx, 0)}A${round2(rx)} ${round2(ry)} 0 1 0 ${point(rx, 0)}A${round2(rx)} ${round2(ry)} 0 1 0 ${point(-rx, 0)}Z`;
+    const [slope, depth] = lid;
+    // The lid is y = d + m x, lower towards the nose for a positive slope.
+    const d = depth * ry;
+    const m = Math.tan((slope * Math.PI) / 180) * inner;
+    const a = 1 / rx ** 2 + m ** 2 / ry ** 2;
+    const b = (2 * m * d) / ry ** 2;
+    const root = Math.sqrt(Math.max(0, b ** 2 - 4 * a * (d ** 2 / ry ** 2 - 1)));
+    const [x1, x2] = [(-b - root) / (2 * a), (-b + root) / (2 * a)];
+    // From the right end round the bottom to the left: the long way when the middle is uncovered.
+    return `M${point(x2, d + m * x2)}A${round2(rx)} ${round2(ry)} 0 ${d < 0 ? 1 : 0} 1 ${point(x1, d + m * x1)}Z`;
+}
+function drawPupil(pupil, lid, rx, ry, inner, gaze, ink, tall) {
+    if (pupil === "none")
+        return "";
+    if (pupil === "hang") {
+        // Just under the lid, so its top is cut off, looking aside.
+        const r = ry * 0.38;
+        const x = gaze * rx * 0.42;
+        const [slope, depth] = typeof lid === "string" ? [0, -0.3] : lid;
+        const y = depth * ry + Math.tan((slope * Math.PI) / 180) * x * inner + r * 0.45;
+        return tall
+            ? `<ellipse cx="${round2(x)}" cy="${round2(y + r * 0.2)}" rx="${round2(r * 0.78)}" ry="${round2(r * 1.25)}" fill="${ink}"/>`
+            : `<circle cx="${round2(x)}" cy="${round2(y)}" r="${round2(r)}" fill="${ink}"/>`;
+    }
+    if (pupil === "big") {
+        const x = gaze * rx * 0.22;
+        return `<circle cx="${round2(x)}" cy="0" r="${round2(ry * 0.56)}" fill="${ink}"/><circle cx="${round2(x + ry * 0.2)}" cy="${round2(-ry * 0.2)}" r="${round2(ry * 0.16)}" fill="#fff"/>`;
+    }
+    if (pupil === "tiny")
+        return `<circle cx="0" cy="${round2(ry * 0.05)}" r="${round2(ry * 0.2)}" fill="${ink}"/>`;
+    if (pupil === "slit")
+        return `<ellipse cx="${round2(gaze * rx * 0.3)}" cy="${round2(ry * 0.15)}" rx="${round2(ry * 0.16)}" ry="${round2(ry * 0.8)}" fill="${ink}"/>`;
+    if (pupil === "heart") {
+        const s = ry * 0.075;
+        return `<path d="M0 ${round2(7 * s)}C${point(-10 * s, 0)} ${point(-7 * s, -8 * s)} 0 ${round2(-3.5 * s)}C${point(7 * s, -8 * s)} ${point(10 * s, 0)} 0 ${round2(7 * s)}Z" transform="translate(0 ${round2(ry * 0.15)})" fill="${ink}"/>`;
+    }
+    const k = ry * 0.42;
+    return `<path d="M${point(-k, -k)}L${point(k, k)}M${point(k, -k)}L${point(-k, k)}" stroke="${ink}" stroke-width="${round2(ry * 0.2)}" stroke-linecap="round"/>`;
+}
+/** Each animal's nose, in the face's frame. A bear's sits on a pale muzzle, a dog's on a white one. */
+function drawNose(species, view, fur) {
+    if (species.nose === "cat")
+        return `<path d="${view.noseShape}" fill="${mix(fur, ...view.noseTint)}"/>`;
+    const big = "M-4.2 -1.8Q0 -3.2 4.2 -1.8Q5 -0.6 3.6 1Q1.6 2.8 0 2.8Q-1.6 2.8 -3.6 1Q-5 -0.6 -4.2 -1.8Z";
+    if (species.nose === "dog")
+        return `<path d="${smooth(DOG_MUZZLE)}" fill="${MUZZLE}"/><path d="${view.noseShape}" fill="${fur}"/>`;
+    return `<ellipse cx="2" cy="5" rx="11" ry="8.2" fill="${mix(fur, WHITE, 0.22)}"/><path d="${big}" fill="${fur}"/>`;
+}
+/** An owl's beak: rounded on top, fuller on the far side, coming to a point. Open, it parts. */
+const drawBeak = (open) => open
+    ? `<path d="M-4.2 0.6Q-3.6 -1.8 -0.4 -1.6Q2.8 -1.4 3.6 0.4Q2 3 -0.6 4.6Q-2.8 3 -4.2 0.6Z" fill="${BEAK}"/>` +
+        `<path d="M-2.6 6Q-0.6 5.2 1.4 6Q0.2 8.4 -1 9.6Q-1.8 7.8 -2.6 6Z" fill="${BEAK}"/>`
+    : `<path d="M-4.2 0.6Q-3.6 -1.8 -0.4 -1.6Q2.8 -1.4 3.6 0.4Q1.6 4.6 -1.1 8.6Q-1.6 8.9 -1.9 8.2Q-3 4.4 -4.2 0.6Z" fill="${BEAK}"/>`;
+/**
+ * Round each of an owl's eyes, in the face's frame: a grey disc, thick at its outer foot and
+ * thin over the top, and inside it a black socket a little bigger than the eye.
+ */
+const drawOwlFace = (eyes, fur, grey) => eyes
+    .map(({ c, rx, ry }, i) => {
+    const side = i ? 1 : -1;
+    return ellipse([c[0] + side * rx * 0.12, c[1] + ry * 0.34], rx * 1.44, ry * 1.55, 0, grey) + ellipse([c[0], c[1] + ry * 0.06], rx + 1.8, ry * 0.86 + 1.8, 0, fur);
+})
+    .join("");
+/** An owl's chest feathers, two rows of grey crescents, and its wing, outlined in grey, in tile units. */
+const OWL_CHEST = [
+    [32.3, 43.3, 79], [43.3, 54.2, 79], [28, 39.5, 88], [39.5, 51, 88],
+]
+    .map(([a, b, y]) => `M${a} ${y}Q${round2((a + b) / 2)} ${y + 10} ${b} ${y}Q${round2((a + b) / 2)} ${y + 5} ${a} ${y}Z`)
+    .join("");
+const OWL_WING = "M83.2 77.5C72 70.5 62 74 63 85C63.6 92 66.5 96 69.5 101L71.8 101C68.8 95.5 66.6 91 66.2 85C65.6 77.4 73 74 83.2 77.5Z" +
+    "M72.6 87.3Q76.5 93 80.5 101L82.4 101Q77.8 92.4 72.6 87.3Z";
+/** The little marks an owl's mood makes round it: lines of joy or surprise, or a sparkle. */
+function drawAccents(mood, fur) {
+    const dashes = (colour) => `<path d="${[-40, 0, 40].map((a) => { const [x, y] = turned([0, -1], a); return `M${point(90 + x * 5.5, 14 + y * 5.5)}L${point(90 + x * 9, 14 + y * 9)}`; }).join("")}" stroke="${colour}" stroke-width="1.6" stroke-linecap="round"/>`;
+    if (mood.name === "Happy" || mood.name === "Smitten")
+        return dashes("#fff");
+    if (mood.name === "Curious" || mood.name === "Shocked" || mood.name === "Dizzy")
+        return dashes(fur);
+    if (mood.name === "Smug" || mood.name === "Sly")
+        return `<path d="M7 66Q7.4 69.6 11 70Q7.4 70.4 7 74Q6.6 70.4 3 70Q6.6 69.6 7 66Z" fill="#fff"/>`;
+    return "";
+}
+/** Both whisker pads, in the face's frame. */
+const bothPads = (paint) => `<path d="${TIGER_PAD}" ${paint}/><path d="${TIGER_PAD}" transform="scale(-1 1)" ${paint}/>`;
+/**
+ * A tiger's nose, the whisker spots on its pads, and its chin: white, with a fang at the
+ * corner. When it roars, the chin opens into a mouth with a fang each side.
+ */
+function drawTigerFace(mood, view, fur, clip) {
+    const spots = [[-6.9, 4.3], [-8.5, 6.4], [-5, 6.4]].flatMap(([x, y]) => [[x, y], [-x, y]]);
+    const nose = spots.map(([x, y]) => `<circle cx="${x}" cy="${y}" r="0.55" fill="${fur}"/>`).join("") + `<path d="${view.noseShape}" fill="${mix(fur, ...view.noseTint)}"/>`;
+    const roars = mood.mouth === "open" || mood.mouth === "oh" || mood.mouth === "tongue";
+    if (roars) {
+        const mouth = "M-13 18.8Q-13 12.8 -7 12.8H7Q13 12.8 13 18.8V24Q13 30 7 30H-7Q-13 30 -13 24Z";
+        return (nose +
+            `<clipPath id="${clip}"><path d="${mouth}"/></clipPath><path d="${mouth}" fill="${MOUTH_INSIDE}"/>` +
+            `<ellipse cx="0" cy="28" rx="10" ry="5.5" fill="${TONGUE}" clip-path="url(#${clip})"/>` +
+            `<path d="M-10 12.8L-6.6 12.8L-8.4 17.6ZM10 12.8L6.6 12.8L8.4 17.6Z" fill="#fff"/>`);
+    }
+    const fang = "M-11.3 13.2L-8.5 13.2L-10.1 17.4Z";
+    return (nose +
+        `<rect x="-14.5" y="12.8" width="29.1" height="19.9" rx="5.5" fill="${MUZZLE}"/>` +
+        (mood.fangs ? `<path d="${fang}" fill="${MUZZLE}" stroke="${fur}" stroke-width="0.7" stroke-linejoin="round"/>` : "") +
+        (mood.fangs === 2 ? `<path d="${fang}" transform="scale(-1 1)" fill="${MUZZLE}" stroke="${fur}" stroke-width="0.7" stroke-linejoin="round"/>` : ""));
+}
+/** Cats draws only cats; Animals picks the animal too, with ids of its own so both can be on the page. */
+export function createKitty(name, overrides, animals = false, ids = prefixOf(animals)) {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const id = (part) => `${ids}-${part}`;
+    const species = animals ? speciesOf(t) : SPECIES[0];
+    const view = species.view ?? viewOf(t);
+    const { centre } = view;
+    const mood = moodOf(t);
+    const pose = poseOf(t);
+    const style = earsOf(t);
+    const fluff = species.cheeks ?? furStyleOf(t).name;
+    const { tile, fur, eye: eyeColour } = coloursOf(t);
+    const shade = mix(fur, ...view.earTint);
+    const grey = mix(fur, WHITE, 0.23);
+    const ink = mix(fur, "#000000", 0.7);
+    // The head grows about its middle, and the ears and whiskers with it.
+    const sx = t.num("head.width", 0.94, 1.06);
+    const sy = t.num("head.height", 0.95, 1.05);
+    const grow = ([x, y]) => [centre[0] + (x - centre[0]) * sx, centre[1] + (y - centre[1]) * sy];
+    const outward = (p, by) => {
+        const away = distance(p, centre);
+        return [p[0] + ((p[0] - centre[0]) / away) * by, p[1] + ((p[1] - centre[1]) / away) * by];
+    };
+    const outline = view.head.map((p, i) => grow(fluff === "Chubby" && view.cheeks.includes(i) ? outward(p, 2.6) : p));
+    const headPath = smooth(outline);
+    const spikes = fluff === "Fluffy"
+        ? view.cheeks.filter((i) => view.cheeks.includes(i + 1))
+            .map((i) => {
+            const [a, b] = [outline[i], outline[i + 1]];
+            return polygon([lerp(a, b, 0.15), outward(lerp(a, b, 0.5), 3.2 + t.num(`fluff.${i}`, 0, 1.6)), lerp(a, b, 0.85)]);
+        })
+            .join("")
+        : "";
+    const earSize = t.num("ear.size", 0.9, 1.1);
+    const ears = view.ears.map(({ inner, tip, outer }, i) => {
+        const out = i === 0 ? -1 : 1;
+        const odd = style.odd && i === 1;
+        const middle = lerp(inner, outer, 0.5);
+        const flare = style.flare + (odd ? 38 : 0) + t.jitter(`ear.lean${i}`, 4);
+        const reach = turned([tip[0] - middle[0], tip[1] - middle[1]], out * flare);
+        const height = style.height * earSize * (odd ? 0.85 : 1);
+        const tipAt = [middle[0] + reach[0] * height, middle[1] + reach[1] * height];
+        const kind = species.ears;
+        if (kind === "point") {
+            const rounded = { ...style, round: Math.max(style.round, species.earRound ?? 0) };
+            return drawEar(grow(inner), grow(tipAt), grow(outer), centre, rounded, fur, shade, species.earBulge, species.earInset);
+        }
+        if (kind === "tuft")
+            return drawOwlTuft(grow(inner), grow(tipAt), grow(outer), centre, style, fur, grey);
+        return drawRoundEar(grow(inner), grow(tipAt), grow(outer), style, fur, shade);
+    });
+    const length = t.num("whisker.length", 0.85, 1.15);
+    const keep = t.int("whisker.n", 2, 3);
+    const whiskers = !species.whiskers ? "" : view.whiskers.filter((_, i) => keep === 3 || i % 3 !== 1)
+        .map(([root, bend, end], i) => {
+        const spin = t.jitter(`whisker.${i}`, 5);
+        const from = grow(root);
+        const reach = (p) => {
+            const v = turned([(p[0] - root[0]) * length, (p[1] - root[1]) * length], spin);
+            return [from[0] + v[0], from[1] + v[1]];
+        };
+        return `M${at(from)}Q${at(reach(bend))} ${at(reach(end))}`;
+    })
+        .join("");
+    // The face hangs from the nose, upright, and turns with the head.
+    const faceAt = `translate(${point(...grow(view.nose))}) rotate(${view.tilt}) scale(${round2((sx + sy) / 2)})`;
+    const face = (inner) => `<g transform="${faceAt}">${inner}</g>`;
+    const eyeScale = t.num("eye.size", 0.9, 1.12);
+    const gap = t.num("eye.gap", -1.5, 1.5);
+    const lift = t.num("eye.y", -1, 1);
+    const gaze = t("gaze") < 0.75 ? 1 : -1;
+    const slopeShift = t.jitter("lid.slope", 3);
+    const eyes = view.eyes.map(({ c, rx: baseX, ry: baseY }, i) => {
+        const rx = baseX * eyeScale;
+        const ry = baseY * eyeScale;
+        const side = i === 0 ? -1 : 1;
+        const inner = -side;
+        const raw = mood.lids[i];
+        const lid = typeof raw === "string" ? raw : [raw[0] + slopeShift, raw[1]];
+        const move = `translate(${point(c[0] + side * gap, c[1] + lift)})`;
+        if (lid === "closed" || lid === "happy") {
+            const bend = lid === "happy" ? -ry * 1.1 : ry * 0.9;
+            const end = lid === "happy" ? ry * 0.3 : -ry * 0.1;
+            return `<g transform="${move}"><g data-widen=""><path d="M${point(-rx * 0.85, end)}Q0 ${round2(bend)} ${point(rx * 0.85, end)}" fill="none" stroke="${eyeColour}" stroke-width="1.8" stroke-linecap="round"/></g></g>`;
+        }
+        const shape = eyeShape(lid, rx, ry, inner);
+        return (`<g transform="${move}"><g data-widen=""><g data-blink=""><clipPath id="${id(`eye${i}`)}"><path d="${shape}"/></clipPath><path d="${shape}" fill="${eyeColour}"/>` +
+            `<g clip-path="url(#${id(`eye${i}`)})"><g data-pupil="">${drawPupil(mood.pupil, lid, rx, ry, inner, view.pupilsIn ? inner : gaze, ink, view.tallPupils)}</g></g></g></g></g>`);
+    }).join("");
+    // Open, the inside is dark pink, with the tongue filling the bottom of it.
+    const open = `<clipPath id="${id("mouth")}"><path d="${MOUTHS.open}"/></clipPath><path d="${MOUTHS.open}" fill="${MOUTH_INSIDE}"/>` +
+        `<ellipse cx="9.5" cy="20" rx="15" ry="9.5" transform="rotate(-10 9.5 20)" fill="${TONGUE}" clip-path="url(#${id("mouth")})"/>`;
+    // On a bear's or a dog's pale muzzle the mouth is drawn in fur, to show against it.
+    const dog = species.head === "dog";
+    const mouthInk = species.nose === "bear" || dog ? fur : grey;
+    const mouthWidth = dog ? 1.5 : 1.15;
+    const mouth = mood.mouth === "open"
+        ? open
+        : mood.mouth === "oh"
+            ? `<ellipse cx="1.8" cy="9.4" rx="2.4" ry="3" fill="${mix(fur, WHITE, 0.12)}" stroke="${mouthInk}" stroke-width="1"/>`
+            : MOUTHS[mood.mouth]
+                ? `<path d="${MOUTHS[mood.mouth]}" fill="none" stroke="${mouthInk}" stroke-width="${mouthWidth}" stroke-linecap="round" stroke-linejoin="round"/>`
+                : "";
+    // A dog's tongue lolls out when it's happy, too.
+    const tongue = mood.mouth === "tongue" || (dog && (mood.mouth === "smile" || mood.mouth === "w")) ? `<path d="M-0.4 6.4Q2.2 14.6 5.2 7.4Z" fill="${TONGUE}"/>` : "";
+    const fangs = !species.fangs ? "" : (mood.fangs ? `<path d="${mood.mouth === "open" ? OPEN_FANG : FANG}" fill="#fff"/>` : "") + (mood.fangs === 2 ? `<path d="${FAR_FANG}" fill="#fff"/>` : "");
+    const eyeSpots = view.eyes.map(({ c, rx, ry }, i) => ({
+        c: [c[0] + (i ? 1 : -1) * gap, c[1] + lift],
+        rx: rx * eyeScale,
+        ry: ry * eyeScale,
+    }));
+    const behindEyes = species.head === "owl" ? drawOwlFace(eyeSpots, fur, grey) : "";
+    const owl = species.head === "owl"
+        ? `<path d="${OWL_CHEST}${OWL_WING}" fill="${grey}"/>${drawAccents(mood, fur)}`
+        : "";
+    // The dog's collar sits behind its chin, with a white bone tag hanging from it, outlined in fur.
+    const collar = dog
+        ? `<path d="${COLLAR}" fill="${t.pick("collar", COLLARS) || mix(fur, WHITE, 0.24)}"/>` +
+            `<path d="${BONE}" transform="translate(58.2 84.6) rotate(-5) scale(1.12)" fill="${MUZZLE}" stroke="${fur}" stroke-width="1.3" paint-order="stroke"/>`
+        : "";
+    const tiger = species.head === "tiger";
+    const stripes = tiger
+        ? bothSides(TIGER_SPIKES, `fill="${fur}"`) +
+            bothSides(TIGER_STRIPES, `fill="none" stroke="${mix(fur, WHITE, 0.38)}" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round"`) +
+            bothSides(TIGER_BROWS, `fill="none" stroke="#fff" stroke-width="0.8" stroke-linecap="round"`) +
+            bothSides(TIGER_FLICKS, `fill="none" stroke="${grey}" stroke-width="0.9" stroke-linecap="round"`) +
+            `<path d="${TIGER_CHEST}" fill="${mix(fur, WHITE, 0.2)}"/>`
+        : "";
+    const dogMouth = mood.mouth === "smirk" ? `<path d="${DOG_SMIRK}" fill="none" stroke="${fur}" stroke-width="${mouthWidth}" stroke-linecap="round" stroke-linejoin="round"/>` : "";
+    const scale = pose.scale * t.num("body.size", 0.96, 1.04);
+    const mirror = pose.mirrored ? "translate(100 0) scale(-1 1) " : "";
+    return {
+        defs: `<clipPath id="${id("face")}"><path d="${headPath}"/></clipPath>` +
+            (tiger ? `<clipPath id="${id("pads")}"><g transform="${faceAt}">${bothPads("")}</g></clipPath>` : "") +
+            `<filter id="${id("grain")}" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="2.2" numOctaves="1" seed="7"/>` +
+            `<feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.32 -0.12"/></filter>`,
+        tile,
+        pose: `${mirror}translate(${point(50 + pose.x, 50 + pose.y)}) rotate(${round2(pose.turn + t.jitter("tilt", 5))}) scale(${round2(scale)}) translate(-50 -50) ${view.frame}`.trim(),
+        mirrored: Boolean(pose.mirrored),
+        body: `<path d="${polygon(view.body)}" fill="${fur}"/>${collar}<path d="${headPath}" fill="${fur}"/>` +
+            owl +
+            stripes +
+            (spikes ? `<path d="${spikes}" fill="${fur}"/>` : "") +
+            (tiger
+                ? // A tiger's are fine and white, and turn to fur where they cross its white pads, which
+                    // are drawn with the face; so they go over the face too, below.
+                    ""
+                : `<path d="${whiskers}" fill="none" stroke="${view.greyWhiskers ? grey : fur}" stroke-width="1" stroke-linecap="round"/>` +
+                    // The same whiskers in grey where they cross the face, so they show on the fur.
+                    `<g clip-path="url(#${id("face")})"><path d="${whiskers}" fill="none" stroke="${grey}" stroke-width="1" stroke-linecap="round"/></g>`),
+        ears,
+        // An owl's tufts lie over its head, so their crescents show where they meet it.
+        earsFront: species.ears === "tuft",
+        eyes: face(eyes),
+        discs: (behindEyes ? face(behindEyes) : "") + (tiger ? `<g transform="${faceAt}">${bothPads(`fill="${MUZZLE}"`)}</g>` : ""),
+        face: (tiger
+            ? `<path d="${whiskers}" fill="none" stroke="#fff" stroke-width="0.7" stroke-linecap="round"/>` +
+                `<g clip-path="url(#${id("pads")})"><path d="${whiskers}" fill="none" stroke="${fur}" stroke-width="0.7" stroke-linecap="round"/></g>`
+            : "") +
+            face(species.nose === "beak"
+                ? `<g>${drawBeak(mood.mouth === "open" || mood.mouth === "oh" || mood.mouth === "tongue")}</g>`
+                : dog
+                    ? drawNose(species, view, fur) + (dogMouth || `<g transform="scale(-1 1)">${tongue}${mouth}${fangs}</g>`) + (dogMouth && mood.fangs === 2 ? `<path d="${DOG_FANG}" fill="#fff"/>` : "")
+                    : tiger
+                        ? drawTigerFace(mood, view, fur, id("roar"))
+                        : drawNose(species, view, fur) + tongue + mouth + fangs),
+        blinkDelay: t.num("blink", 0, 4),
+    };
+}
+export const TILE_SHAPE = `<rect width="100" height="100" rx="22.22"/>`;
+/** The id prefix each section's drawing uses. */
+export const prefixOf = (animals) => (animals ? "animal" : "kitty");
+/** The tile and its grain, which sit still behind the animal. */
+export const tileMarkup = (fill, ids) => TILE_SHAPE.replace("/>", ` fill="${fill}"/>`) +
+    TILE_SHAPE.replace("/>", ` filter="url(#${ids}-grain)" clip-path="url(#${ids}-tile)"/>`);
+/** The animal at rest, for thumbnails. */
+const still = (animals) => (name, overrides) => {
+    const cat = createKitty(name, overrides, animals);
+    const tile = `${prefixOf(animals)}-tile`;
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs>${cat.defs}<clipPath id="${tile}">${TILE_SHAPE}</clipPath></defs>` +
+        tileMarkup(cat.tile, prefixOf(animals)) +
+        `<g clip-path="url(#${tile})"><g transform="${cat.pose}">${cat.earsFront ? "" : cat.ears.join("")}${cat.body}${cat.discs}${cat.face}${cat.earsFront ? cat.ears.join("") : ""}${cat.eyes}</g></g></svg>`);
+};
+export const animalSvg = still(true);