@codincod/ornament 0.0.0-stage → 0.2.0

package/src/visitors.ts

@@ -0,0 +1,1936 @@
+/**
+ * The big animals, crossing.
+ *
+ * A turtle, a pod of dolphins, a manta, a shark, and one thing that is none of
+ * those. Kept free of the DOM the way the rest of the ornament is, and kept
+ * apart from `shoal.ts` for the reason `cephalopods.ts` gives: these are not
+ * fish with different constants.
+ * A fish in this water lives here and is steered by what it wants. A visitor is
+ * going somewhere else, and the picture is on its way.
+ *
+ * ## Why they are not passers
+ *
+ * `passers.ts` is the surface and what is looking for you, and it keeps
+ * appointments by the day: a boat crosses once, a submarine on one day in
+ * seven. That clock is right for machinery and wrong for an animal. A turtle is
+ * not a rare event, it is an uncommon one, and the difference is the whole feel
+ * of the thing. What happens once a day is something you wait for. What happens
+ * every few minutes is a sea with animals in it.
+ *
+ * So these run on watched time, one party at a time with a long rest between,
+ * and nothing is written down. See `REST_LEAST`.
+ *
+ * ## Every one of them is a silhouette
+ *
+ * That is not a saving. It is the only way anybody has ever seen one of these:
+ * you are under it, the light is behind it, and what reaches you is an outline.
+ * Colour on a shark at that distance would be an invention, and the outline is
+ * the part that carries the animal anyway.
+ *
+ * Which means the drawing has to be right where an outline is read, and that is
+ * the fins and the head. The tables below are all profile: where the body is
+ * deep, where it is thin, and what stands off it.
+ *
+ * ## Some of them swim and some of them do not
+ *
+ * The shark, the dolphin and the mermaid carry a wave down the body, the way
+ * `fish_shape.ts` builds a fish, and everything they have hangs off that spine:
+ * a tail sweeps because the body it is joined to swept. What separates the
+ * first two is a profile and a phase, which is honest, because from the side
+ * they really are the same animal with a different nose and a different tail.
+ *
+ * The third differs in where the wave is allowed to start. A shark bends a
+ * little at the shoulders and a great deal at the wrist; a person does not bend
+ * at the shoulders at all. `ENVELOPES` is that difference and it is the whole
+ * of it, so a mermaid comes out as a body held still down to the waist with
+ * everything below it doing the swimming, which is what a monofin actually
+ * looks like from the side.
+ *
+ * The turtle rows. Its shell is rigid, so the whole animal is two flippers
+ * beating and a body going along with it, and `blade` is what draws one.
+ *
+ * The manta is the odd one, and it is drawn from below because that is where
+ * the eye looking at it is. Its wings beat up and down, so what changes on the
+ * screen is how far out the tips reach: a wing at the top of its beat is
+ * foreshortened to nearly nothing and a wing held level is at full span. Drawn
+ * flat it is a kite. See `MANTA_FOLD`.
+ *
+ * ## What a visitor does to the water
+ *
+ * Almost nothing, on purpose. It leaves a `Startle`, and a soft wide one: the
+ * shoal gives way and closes behind it. Nothing here is hunting and nothing
+ * here is hunted, and a shoal scattering from a passing shark would make this a
+ * picture about danger, which this water is not. It is a picture about
+ * something large going by, and the water noticing.
+ *
+ * ## And one of them is not an animal
+ *
+ * There is a mermaid in here, and she is the one thing in this file that does
+ * not run on watched time. Odds could not get her rare enough, so she keeps an
+ * appointment by the day the way a submarine does, on about one day in thirty
+ * and never twice; `MERMAID_DAYS` has the argument. Nothing in the water treats
+ * her as other than a shape on its way somewhere.
+ *
+ * A silhouette is the only honest way to draw her, and it is the reason she can
+ * be here at all. Everything down here is an outline because that is what the
+ * light does to something large at eight metres, and at eight metres there is
+ * nothing to argue with. Somebody who saw it saw a shape with hair on it. The
+ * water declines to say more than that, and so does this file.
+ */
+
+import type { Biome } from "./biome.ts"
+import { mixOf } from "./census.ts"
+import { makeRandom, stir } from "./perlin.ts"
+import { drawnTilt, type Startle } from "./shoal.ts"
+import { drawnAt, SWIMMING_OFF } from "./sizes.ts"
+
+export type VisitKind = "dolphin" | "manta" | "mermaid" | "shark" | "turtle"
+
+export interface Visitor {
+  /** How far through its crossing, 0 to 1. Negative until it has set off. */
+  along: number
+  /** 0 is as far off as this water goes, 1 is up against the glass. */
+  readonly depth: number
+  /** Which way it is going: 1 rightward, -1 left. */
+  readonly facing: number
+  readonly kind: VisitKind
+  /**
+   * How far off the party's own line this one holds, in px.
+   *
+   * Nothing for a leader and for anything that travels alone. It is already in
+   * `y`, so a renderer has no use for it; what it is here for is that the whole
+   * party shares one course and this is the only thing that differs.
+   */
+  readonly lift: number
+  /**
+   * Its own rhythm, as a multiple of what its kind beats at.
+   *
+   * Drawn once, as it arrives, and never rolled again. A beat that takes a
+   * fresh number every frame has no period at all, and what that looks like is
+   * an engine misfiring rather than an animal; `shoal.ts` says the same thing
+   * about a fish's burst and for the same reason. What this is for is that two
+   * of a kind crossing the same water should not be beating in time.
+   */
+  readonly pace: number
+  /** Nose to tail in px, with the distance already taken out of it. */
+  readonly size: number
+  /**
+   * How far through its stroke it is, 0 to 1.
+   *
+   * The one number every drawing is read off, which is the rule the squid's
+   * mantle keeps for the same reason: an animal whose travel and whose drawing
+   * come off one clock cannot fall out of step with itself.
+   */
+  stroke: number
+  /**
+   * How far to turn the drawing, in radians, after mirroring it by `facing`.
+   *
+   * `drawnTilt`, so a visitor mirrors exactly as a fish and a squid do. The
+   * note on that function is worth reading before a renderer touches this.
+   */
+  tilt: number
+  /** How loud it is now, 0 to 1, faded in and out at the ends. */
+  weight: number
+  x: number
+  y: number
+}
+
+export interface Visitors {
+  readonly crossing: readonly Visitor[]
+  resize(width: number, height: number): void
+  /** What the water is being told to do now, or null while nothing is by. */
+  readonly startle: Startle | null
+  step(seconds: number): void
+}
+
+export interface VisitorsOptions {
+  /** Cross one after another with no rest. For previews and for tests. */
+  eager?: boolean
+  height: number
+  kinds?: readonly VisitKind[]
+  seed: number
+  /**
+   * The water these are in, so that whatever lives down there can see them.
+   *
+   * Entered rather than announced. What a shark looks like to a crab is a fact
+   * about the shark, so it is stated here, and the crab reads the water and
+   * makes its own mind up; see `biome.ts`. Left out, these cross a water that
+   * nothing else is looking at, which is what a test and the website want.
+   */
+  water?: Biome
+  width: number
+}
+
+/**
+ * What each animal is, where it swims, and how long it takes to cross.
+ *
+ * Which of them crosses next is not settled here. Exactly one party crosses at
+ * a time and the only question is which, so the weights are how common each
+ * animal is over a reef, out of `census.ts` with everything else that lives in
+ * this water. The mermaid is in no draw at all: she keeps an appointment by the
+ * day instead, which `MERMAID_DAYS` sets out at length.
+ *
+ * `seat` is where in the column it swims and `far` is how far back, and between
+ * them they tell one from another before a single outline is read. A dolphin is
+ * at the top because that is where it breathes. A manta is high because you
+ * look up at one. A shark is out in the middle water where nothing else here
+ * goes. A turtle is anywhere, because a turtle is on its way to the surface
+ * from wherever it happened to be, and the mermaid is going the same way for
+ * the same reason.
+ *
+ * `party` is how many come at once, and only the dolphins do. That is the fact
+ * about dolphins: one reads as a fish and three read as a pod before the eye
+ * has resolved a fin.
+ *
+ * The sizes are lengths of real animals, in metres, at the distance they all
+ * swim past at; `sizes.ts` turns the pair into a share of the box. They are a
+ * bottlenose, a giant oceanic manta measured down the disc rather than across
+ * it, a grown great white, and a green turtle nose to the back of its shell.
+ * The manta's wings are getting on for twice its disc again, which the drawing
+ * already knows and this table does not have to. The mermaid is the one length
+ * here nobody can look up, so she is written as a tall woman with a tail on
+ * her, which is the only measurement anybody has ever offered.
+ */
+interface Habit {
+  /** How fast it works through its stroke, in strokes a second. */
+  readonly beat: number
+  /** How far back it swims, from the murk at 0 to the glass at 1. */
+  readonly farLeast: number
+  readonly farSpan: number
+  /** How hard a startle it leaves, against the loudest there is; see `FELT`. */
+  readonly heft: number
+  /**
+   * How much it looks like something that hunts, 0 through 1.
+   *
+   * A different question from `heft`, and the two do not track each other. A
+   * pod of dolphins is the loudest thing that crosses this water and a manta
+   * is nearly as large, and only one of them is anything a small animal has
+   * ever had to think about. What this decides is not the push, which is
+   * physics; it is whether a crab on the floor stops walking.
+   */
+  readonly menace: number
+  /** How many come at once, at least and up to that again. */
+  readonly party: number
+  readonly partySpan: number
+  /** Where in the column it swims, as shares of the height. */
+  readonly seatLeast: number
+  readonly seatSpan: number
+  /**
+   * How big it is drawn, as shares of the box's width.
+   *
+   * Written as the length of a real animal in metres and the distance it swims
+   * at, and turned into a share by `sizes.ts`, so the four of them are the
+   * sizes they are against each other rather than four numbers that each
+   * looked right alone.
+   */
+  readonly sizeLeast: number
+  readonly sizeSpan: number
+  /** How long a crossing takes, at least and up to that again, in seconds. */
+  readonly takeLeast: number
+  readonly takeSpan: number
+}
+
+const HABITS: Readonly<Record<VisitKind, Habit>> = {
+  dolphin: {
+    beat: 1.05,
+    farLeast: 0.5,
+    farSpan: 0.45,
+    heft: 0.5,
+    menace: 0.35,
+    party: 2,
+    partySpan: 3,
+    seatLeast: 0.08,
+    seatSpan: 0.16,
+    sizeLeast: drawnAt(2.4, SWIMMING_OFF),
+    sizeSpan: drawnAt(3.6, SWIMMING_OFF) - drawnAt(2.4, SWIMMING_OFF),
+    takeLeast: 16,
+    takeSpan: 9,
+  },
+  /**
+   * A reef manta, measured nose to tail like everything else in this table.
+   *
+   * Which is not what a reader sees. A manta is about twice as wide as it is
+   * long and the drawing is too, so the animal that crosses the picture reaches
+   * getting on for twice these numbers, which is the disc a diver would report.
+   * Written as a span it would come out an oceanic giant, and one of those over
+   * a reef is a different picture altogether.
+   */
+  manta: {
+    beat: 0.3,
+    farLeast: 0.35,
+    farSpan: 0.45,
+    heft: 0.35,
+    menace: 0,
+    party: 1,
+    partySpan: 0,
+    seatLeast: 0.12,
+    seatSpan: 0.18,
+    sizeLeast: drawnAt(1.7, SWIMMING_OFF),
+    sizeSpan: drawnAt(2.7, SWIMMING_OFF) - drawnAt(1.7, SWIMMING_OFF),
+    takeLeast: 30,
+    takeSpan: 16,
+  },
+  mermaid: {
+    beat: 0.62,
+    farLeast: 0.5,
+    farSpan: 0.38,
+    heft: 0.35,
+    menace: 0,
+    party: 1,
+    partySpan: 0,
+    seatLeast: 0.2,
+    seatSpan: 0.3,
+    sizeLeast: drawnAt(1.9, SWIMMING_OFF),
+    sizeSpan: drawnAt(2.4, SWIMMING_OFF) - drawnAt(1.9, SWIMMING_OFF),
+    takeLeast: 26,
+    takeSpan: 14,
+  },
+  shark: {
+    beat: 0.42,
+    farLeast: 0.3,
+    farSpan: 0.45,
+    heft: 0.6,
+    menace: 0.9,
+    party: 1,
+    partySpan: 1,
+    seatLeast: 0.34,
+    seatSpan: 0.22,
+    sizeLeast: drawnAt(3.6, SWIMMING_OFF),
+    sizeSpan: drawnAt(5.5, SWIMMING_OFF) - drawnAt(3.6, SWIMMING_OFF),
+    takeLeast: 34,
+    takeSpan: 18,
+  },
+  turtle: {
+    beat: 0.24,
+    farLeast: 0.45,
+    farSpan: 0.5,
+    heft: 0.3,
+    menace: 0,
+    party: 1,
+    partySpan: 0,
+    seatLeast: 0.24,
+    seatSpan: 0.36,
+    sizeLeast: drawnAt(1.0, SWIMMING_OFF),
+    sizeSpan: drawnAt(1.5, SWIMMING_OFF) - drawnAt(1.0, SWIMMING_OFF),
+    takeLeast: 40,
+    takeSpan: 22,
+  },
+}
+
+/**
+ * How the crossing itself is shaped, past going from one side to the other.
+ *
+ * A straight line across a picture is a cutout on a rail, and these three
+ * numbers are how each of them declines to be one. `rise` is how much of the
+ * box the animal gains over the whole crossing, negative for a climb: the
+ * turtle is going up, because a turtle crossing your view is a turtle on its
+ * way to breathe. `roll` and `waves` are the slow swing it takes on the way.
+ *
+ * The dolphin's swing is the large one and it is not a wander at all. It is
+ * porpoising: a run of shallow dives under a surface it keeps coming back to.
+ */
+const COURSES: Readonly<Record<VisitKind, Course>> = {
+  dolphin: { rise: -0.03, roll: 0.07, waves: 2.6 },
+  manta: { rise: -0.02, roll: 0.05, waves: 0.8 },
+  mermaid: { rise: -0.08, roll: 0.06, waves: 1.5 },
+  shark: { rise: 0, roll: 0.03, waves: 0.6 },
+  turtle: { rise: -0.2, roll: 0.04, waves: 1.1 },
+}
+
+/** How much of a crossing is spent fading in, and the same again fading out. */
+const FADE = 0.14
+
+interface Course {
+  rise: number
+  roll: number
+  waves: number
+}
+
+/**
+ * How far a party's own swing may differ from the one its kind is written with.
+ *
+ * What is in `COURSES` is what a crossing is like rather than what it is. Two
+ * turtles a week apart taking the identical line through the same water is the
+ * thing that turns a visitor into a screensaver, and one number drawn per party
+ * is all it takes for them not to. The climb is left alone: the climb is the
+ * reason the animal is crossing at all, and an animal that half of the time is
+ * not going up is an animal that half of the time has no errand.
+ */
+const COURSE_SWING = 0.55
+
+/** How far either side of its kind's beat an animal's own rhythm is drawn. */
+const PACE_LEAST = 0.8
+
+const PACE_SPAN = 0.45
+
+/** How far past each side one starts and finishes, as shares of the width. */
+const OFFING = 0.22
+
+/**
+ * Watched seconds between one party leaving and the next arriving.
+ *
+ * Six minutes to a quarter of an hour, and it is the number this whole file
+ * turns on. Under it the sea is a procession and an animal stops being worth
+ * looking up for; a shark every few minutes is scenery. Far past it, somebody
+ * who leaves a desktop uncovered all afternoon never sees one at all. It is
+ * also deliberately not a day, which is the whole of what separates this file
+ * from `passers.ts`.
+ */
+const REST_LEAST = 360
+
+const REST_SPAN = 540
+
+/** How much of that rest the water waits before the first party of a sitting. */
+const OPENING = 0.35
+
+/**
+ * How far behind the leader the rest of a pod swims, and how far off to a side.
+ *
+ * In lengths of the animal. A pod is not a rank and it is not a queue: it holds
+ * a loose echelon off one shoulder, so what is wanted is a lag that grows down
+ * the party and a shoulder that alternates.
+ */
+const WING_BACK = 1.6
+
+const WING_SIDE = 0.6
+
+/** How much smaller each one down a party is drawn than the leader. */
+const WING_SHRINK = 0.1
+
+/** How far apart in its own stroke each one down a party is. */
+const WING_PHASE = 0.17
+
+/** How much of a drawn size is distance rather than the animal. */
+const DEPTH_SIZE = 0.55
+
+/**
+ * How far a visitor is felt through the water, in its own lengths, and how hard
+ * the loudest of them is felt at all.
+ *
+ * Wide and soft, which is the opposite of a hull. A hull is a hard thing
+ * shoving water aside; this is a shape going by, and what the shoal does about
+ * it is lean away and drift back. `shoal.ts` reads the same `Startle` either
+ * way and knows nothing about which it has been handed.
+ */
+const FELT_REACH = 1.9
+
+const FELT = 0.34
+
+const MIN_SPAN = 1
+
+/** How much of a visitor has to have arrived before the water can see it. */
+const SEEN = 0.05
+
+/**
+ * The share of days that have a mermaid on them.
+ *
+ * She is the one thing in this file that does not run on watched time, and the
+ * reason is that no share could get her rare enough. A party crosses every ten
+ * minutes or so of uncovered wallpaper, so the longest odds anybody would write
+ * down still put her in the water most afternoons, and a thing you have seen
+ * twice is a thing you are sure about. She has no business being that.
+ *
+ * So she keeps an appointment instead, which is `passers.ts`'s clock rather
+ * than this file's: the desktop seeds this water with the calendar day, so one
+ * day in thirty draws her and the rest of the month does not. About once a
+ * month, and never twice.
+ *
+ * The other half of it is that the water only advances while the wallpaper is
+ * uncovered. On the day that has her she is a few parties in rather than at
+ * some hour of the clock, so the day she turns up is the day you actually see
+ * her, instead of the day she crossed an empty screen behind a browser.
+ */
+const MERMAID_DAYS = 1 / 30
+
+/** How many parties into her day she may be. */
+const MERMAID_PLACE = 3
+
+/**
+ * The visitors of a piece of water.
+ *
+ * `eager` throws the rest away and crosses one party after another, for the
+ * preview harness and for tests. Nothing should pass it in earnest, for the
+ * reason `createPassers` gives at greater length: the rarity is the feature.
+ */
+export function createVisitors(options: VisitorsOptions): Visitors {
+  const random = makeRandom(options.seed ^ 0x71a5)
+  const kinds = options.kinds ?? (["dolphin", "manta", "mermaid", "shark", "turtle"] as const)
+  const eager = options.eager ?? false
+
+  // Everything that is drawn on a share, which is everything but her. Asked for
+  // her alone, which is what the preview harness and the drawing tests do, the
+  // pool is what was asked for and the appointment is off: a sheet with one
+  // animal on it wants that animal every time.
+  const pool = kinds.filter((kind) => kind !== "mermaid")
+  const drawn = pool.length > 0 ? pool : kinds
+
+  /**
+   * Which party of today's is hers, or -1 on the days that have none.
+   *
+   * Off a stream of its own, and a stirred one, which is two decisions and both
+   * of them were bought. Stirred because the desktop's seed is the calendar
+   * day: a xorshift handed two seeds a day apart returns nearly the same first
+   * number, so a month of days asked this question got a month of the same
+   * answer, and the answer was no. `stir` in `perlin.ts` is the fix and says
+   * why. Its own stream so that adding her moved nothing else: the water shares
+   * one sequence, and a draw taken out of the middle of it is every sea after
+   * this one laid out somewhere else.
+   */
+  const plan = makeRandom(stir(options.seed ^ 0x4d61))
+
+  const owed =
+    kinds.includes("mermaid") && pool.length > 0 && plan() < MERMAID_DAYS
+      ? Math.floor(plan() * MERMAID_PLACE)
+      : -1
+
+  /** How many parties this water has put up, which is how her turn is known. */
+  let parties = 0
+
+  let width = Math.max(MIN_SPAN, options.width)
+  let height = Math.max(MIN_SPAN, options.height)
+
+  const crossing: Visitor[] = []
+
+  /** The course the party is on, which every member of it shares. */
+  let take = 1
+  let course: Course = COURSES.turtle
+  let seat = 0
+
+  /** What the water is being told to do this tick; see `Startle`. */
+  let felt: Startle | null = null
+
+  /** Watched seconds still owed before the next party arrives. */
+  let rest = (REST_LEAST + random() * REST_SPAN) * OPENING
+
+  // Only what is actually showing. A party fades in over the first of its
+  // crossing and fades out over the last, and a shark nobody can see yet is a
+  // shark nothing should be reacting to.
+  options.water?.enter(() =>
+    crossing
+      .filter((one) => one.weight > SEEN)
+      .map((one) => ({
+        depth: one.depth,
+        menace: HABITS[one.kind].menace * one.weight,
+        size: one.size,
+        x: one.x,
+        y: one.y,
+      })),
+  )
+
+  /** How common each of them is over this reef today; see `census.ts`. */
+  const shares = mixOf(drawn, options.seed)
+
+  /** Which kind comes next, on how much of the water each of them is. */
+  function which(): VisitKind {
+    let total = 0
+    for (const kind of drawn) total += shares[kind]
+
+    let at = random() * total
+    for (const kind of drawn) {
+      at -= shares[kind]
+      if (at <= 0) return kind
+    }
+
+    return drawn[0] ?? "turtle"
+  }
+
+  /** The kind's course, as this party is actually going to take it. */
+  function taken(kind: VisitKind): Course {
+    const own = COURSES[kind]
+    const swung = (by: number, much: number): number => by * (1 - much + random() * much * 2)
+
+    return {
+      rise: own.rise,
+      roll: swung(own.roll, COURSE_SWING),
+      waves: swung(own.waves, COURSE_SWING / 2),
+    }
+  }
+
+  /**
+   * Put a party in the water, off the side of the picture.
+   *
+   * Every member shares the leader's course and its clock, and differs in where
+   * it sits against that course, how far behind it is, and how far through its
+   * own stroke. Pods do not beat in time. They beat near enough in time that
+   * the eye reads one animal's worth of decision, which is what the lag and
+   * `WING_PHASE` are between them.
+   */
+  function arrive(): void {
+    const kind = parties++ === owed ? "mermaid" : which()
+    const habit = HABITS[kind]
+    const facing = random() < 0.5 ? -1 : 1
+    const far = habit.farLeast + random() * habit.farSpan
+    const size = width * (habit.sizeLeast + random() * habit.sizeSpan)
+    const count = habit.party + Math.floor(random() * (habit.partySpan + 1))
+    const run = width * (1 + OFFING * 2)
+
+    take = habit.takeLeast + random() * habit.takeSpan
+    course = taken(kind)
+    seat = height * (habit.seatLeast + random() * habit.seatSpan)
+
+    for (let made = 0; made < count; made++) {
+      const side = made % 2 === 0 ? 1 : -1
+      const out = Math.ceil(made / 2)
+      const depth = Math.max(0.06, far - out * 0.05)
+
+      crossing.push({
+        along: -(made * WING_BACK * size) / run,
+        depth,
+        facing,
+        kind,
+        lift: side * out * WING_SIDE * size,
+        pace: PACE_LEAST + random() * PACE_SPAN,
+        size: size * (1 - made * WING_SHRINK) * (1 - DEPTH_SIZE + DEPTH_SIZE * depth),
+        stroke: (random() + made * WING_PHASE) % 1,
+        tilt: 0,
+        weight: 0,
+        x: 0,
+        y: 0,
+      })
+    }
+  }
+
+  /** How far up the box the course is, at `at` through the crossing. */
+  const rides = (at: number): number =>
+    height * (course.rise * at + course.roll * Math.sin(at * Math.PI * 2 * course.waves))
+
+  /**
+   * Where the course has this one, and which way it is therefore pointing.
+   *
+   * The heading is read off the course rather than set, so an animal always
+   * points along the line it is actually travelling and a renderer never has to
+   * be told twice. A step either side is enough to read a slope from: none of
+   * these courses has a corner in it.
+   */
+  function courseAt(one: Visitor): { heading: number; x: number; y: number } {
+    const from = -OFFING * width
+    const to = width * (1 + OFFING)
+    const at = Math.max(0, Math.min(1, one.along))
+    const step = 0.01
+    const ahead = Math.min(1, at + step)
+    const back = Math.max(0, at - step)
+    const run = (to - from) * (ahead - back) * one.facing
+
+    return {
+      heading: Math.atan2(rides(ahead) - rides(back), run || 1),
+      x: one.facing > 0 ? from + at * (to - from) : to - at * (to - from),
+      y: seat + rides(at) + one.lift,
+    }
+  }
+
+  return {
+    crossing,
+
+    resize(nextWidth, nextHeight) {
+      width = Math.max(MIN_SPAN, nextWidth)
+      height = Math.max(MIN_SPAN, nextHeight)
+      // Dropped rather than rescaled, the way a passer is. A shark that changed
+      // length halfway across would be worse than no shark, and a window being
+      // dragged is the one moment nobody is watching the water.
+      crossing.length = 0
+      felt = null
+      rest = REST_LEAST + random() * REST_SPAN
+    },
+
+    get startle() {
+      return felt
+    },
+
+    step(seconds) {
+      const dt = Math.min(Math.max(seconds, 0), 0.1)
+
+      if (crossing.length === 0) {
+        rest -= dt
+        if (eager || rest <= 0) {
+          arrive()
+          rest = REST_LEAST + random() * REST_SPAN
+        }
+      }
+
+      for (let at = crossing.length - 1; at >= 0; at--) {
+        const one = crossing[at]
+        if (!one) continue
+
+        one.along += (dt * driven(one.kind, one.stroke)) / Math.max(take, 0.001)
+        if (one.along >= 1) {
+          crossing.splice(at, 1)
+          continue
+        }
+
+        const where = courseAt(one)
+        one.stroke = (one.stroke + HABITS[one.kind].beat * paced(one) * dt) % 1
+        one.tilt = drawnTilt(where.heading + pitched(one.kind, one.stroke), one.facing)
+        one.weight = Math.max(0, Math.min(1, one.along / FADE, (1 - one.along) / FADE))
+        one.x = where.x
+        // The course says where the animal is going; its own beat says where it
+        // is between one stroke and the next, which is not the same question.
+        one.y = where.y + heaved(one.kind, one.stroke) * one.size
+      }
+
+      // The loudest of them, which for a pod is whichever is furthest into its
+      // crossing. There is one slot in the water for this, and a fish has no
+      // use for a second push from the same animal's friend.
+      felt = null
+      for (const one of crossing) {
+        const force = FELT * HABITS[one.kind].heft * one.weight
+        if (force <= 0 || (felt && felt.force >= force)) continue
+
+        // Its own distance goes with it. A shape crossing the near water has no
+        // business shoving fish that are a long way behind it; a hull leaves its
+        // depth off for the opposite reason, which `Startle.depth` sets out.
+        felt = { depth: one.depth, force, reach: one.size * FELT_REACH, x: one.x, y: one.y }
+      }
+    },
+  }
+}
+
+/**
+ * One station of a body: how far along, and how deep above and below the spine.
+ *
+ * A table rather than a curve, because a silhouette is read at its shoulders
+ * and its wrist and nowhere else, and a table is the only form in which those
+ * are numbers somebody can move. `over` is towards the back and `under`
+ * towards the belly, and they differ everywhere on every animal here. A body
+ * as deep below its spine as above it is a leaf.
+ *
+ * `x` runs from the nose at 1 back to the tail joint, in a body two units long.
+ */
+interface Station {
+  readonly over: number
+  readonly under: number
+  readonly x: number
+}
+
+/**
+ * The shark, from the side.
+ *
+ * Slim, with the depth well forward and a long taper into a narrow wrist, which
+ * is what separates a shark's outline from a fish's before a single fin is
+ * drawn. A fish carries its depth in the middle. A shark carries it at the
+ * shoulders and then runs away to a point.
+ */
+const SHARK: readonly Station[] = [
+  { over: 0.005, under: 0.005, x: 1 },
+  { over: 0.045, under: 0.05, x: 0.88 },
+  { over: 0.085, under: 0.088, x: 0.7 },
+  { over: 0.113, under: 0.105, x: 0.46 },
+  { over: 0.115, under: 0.098, x: 0.2 },
+  { over: 0.098, under: 0.078, x: -0.06 },
+  { over: 0.072, under: 0.055, x: -0.3 },
+  { over: 0.05, under: 0.036, x: -0.46 },
+  { over: 0.032, under: 0.026, x: -0.58 },
+]
+
+/**
+ * The dolphin, from the side.
+ *
+ * The beak is the whole animal. Everything else about a dolphin's outline is
+ * shared with a shark of the same size, and the step from a thin rostrum up
+ * into the melon is the one place the eye tells them apart at a distance. It is
+ * worth four stations of a nine-station table.
+ */
+const DOLPHIN: readonly Station[] = [
+  { over: 0.02, under: 0.028, x: 1 },
+  { over: 0.032, under: 0.05, x: 0.92 },
+  { over: 0.055, under: 0.062, x: 0.84 },
+  { over: 0.1, under: 0.078, x: 0.78 },
+  { over: 0.15, under: 0.115, x: 0.68 },
+  { over: 0.185, under: 0.165, x: 0.44 },
+  { over: 0.18, under: 0.175, x: 0.14 },
+  { over: 0.14, under: 0.13, x: -0.2 },
+  { over: 0.095, under: 0.088, x: -0.44 },
+  { over: 0.062, under: 0.056, x: -0.62 },
+]
+
+/** The ones whose whole body carries a wave, and is therefore built on a spine. */
+type Swimmer = "dolphin" | "mermaid" | "shark"
+
+/** Where each one's tail is joined on, in the same units the tables use. */
+const JOINTS: Readonly<Record<Swimmer, number>> = {
+  dolphin: -0.62,
+  mermaid: -0.62,
+  shark: -0.58,
+}
+
+/**
+ * How much of a wave each carries, and how far the tail swings.
+ *
+ * `sweep` is the swing at the joint, in body lengths, and it is the number
+ * `fish_shape.ts` argues about at length: a tail sweeping further than the
+ * animal's travel accounts for reads as flapping in place rather than as
+ * swimming. Both of these are under a fish's fifth, because both animals are
+ * large, and a large swimmer beats less far and much more slowly.
+ */
+const SWEEP: Readonly<Record<Swimmer, { sweep: number; waves: number }>> = {
+  dolphin: { sweep: 0.075, waves: 0.62 },
+  mermaid: { sweep: 0.105, waves: 0.58 },
+  shark: { sweep: 0.085, waves: 0.78 },
+}
+
+/** Where along the body the still point is, and how the swing grows past it. */
+const finned = (u: number): number => 0.16 - 0.7 * u + 1.54 * u * u
+
+/**
+ * The same question answered by something with a spine that does not do that.
+ *
+ * A fish is still a fifth of the way back and moving everywhere else, head
+ * included. A person swimming is the other arrangement: the head is held,
+ * because a swimmer looks where they are going, and the back above the waist
+ * has no joints that would let it do anything else. Everything the animal has
+ * happens below that and it happens all at once, which is why this is a power
+ * rather than a curve with a low point in it.
+ */
+const waisted = (u: number): number => 0.05 + 0.95 * u ** 2.4
+
+/** Which of the two each swimmer is read off. */
+const ENVELOPES: Readonly<Record<Swimmer, (u: number) => number>> = {
+  dolphin: finned,
+  mermaid: waisted,
+  shark: finned,
+}
+
+/**
+ * How far the mermaid's body is held off the straight, and how high she rides.
+ *
+ * The arch is the pose, and it is most of what makes the drawing read. Laid out
+ * along a line she is a diver: head down, body level, tail astern, and what the
+ * eye gets is somebody in a wetsuit. Every mermaid anybody has ever drawn is
+ * bent instead, head carried high and the tail swept away below, and that curve
+ * says more about what she is than the fluke on the end of it does.
+ *
+ * `MERMAID_ARCH` is how much of the box the body gives up from the crown to the
+ * tail joint, and `MERMAID_RIDE` is how much of that is taken back off so the
+ * curve straddles the line she travels along rather than hanging under it. The
+ * shape between them is a smoothstep, which is flat at both ends and steepest
+ * in the middle: the head stays level, the fluke stays level, and the waist is
+ * where the body turns. A curve that bent at the ends instead would be an
+ * animal with a broken neck.
+ */
+const MERMAID_ARCH = 0.52
+
+const MERMAID_RIDE = 0.21
+
+/**
+ * The shape of each swimmer at rest.
+ *
+ * A shark at rest is a straight line and so is a dolphin, which is why nothing
+ * needed this until something with a spine that curves turned up.
+ */
+const CAMBERS: Readonly<Record<Swimmer, (u: number) => number>> = {
+  dolphin: () => 0,
+  mermaid: (u) => MERMAID_ARCH * u * u * (3 - 2 * u) - MERMAID_RIDE,
+  shark: () => 0,
+}
+
+/** How far either side of a station its own slope is read, in body units. */
+const SLOPE = 0.05
+
+/** How many points a blade's own curve is cut into, along each side. */
+const CURVE_STEPS = 8
+
+/**
+ * A number as a path writes it, with the sign taken off a zero.
+ *
+ * Every drawing here is periodic, so the same moment of a beat comes round
+ * again and has to come out as the same string; a renderer that keeps a parsed
+ * path is otherwise reparsing an identical one. A sine at the end of its turn
+ * lands a hair under nothing rather than on it, and `-0.000` is a different
+ * string and the same point.
+ */
+const fixed = (value: number): string => (Math.abs(value) < 0.0005 ? 0 : value).toFixed(3)
+
+/**
+ * A ring of points wound the way every other ring here is wound.
+ *
+ * The whole animal is one filled path in several subpaths, for the reason
+ * `SUBMARINE` states: under an odd-even rule a fin sitting on the body cuts a
+ * hole out of it exactly where the two are meant to join. A winding rule wants
+ * every subpath turning the same way, and a fin under the belly is naturally
+ * written the other way round from a fin on the back.
+ *
+ * So nothing here has to be written in any particular order. The area says
+ * which way a ring turns and this turns the ones that disagree.
+ */
+function wound(
+  points: readonly (readonly [number, number])[],
+): readonly (readonly [number, number])[] {
+  let area = 0
+  for (let at = 0; at < points.length; at++) {
+    const here = points[at]
+    const next = points[(at + 1) % points.length]
+    if (!here || !next) continue
+    area += here[0] * next[1] - next[0] * here[1]
+  }
+
+  return area <= 0 ? points : [...points].reverse()
+}
+
+/**
+ * A closed outline through its own points, rounded.
+ *
+ * The same smoothing `fish_shape.ts` uses and for the same reason: corners land
+ * on the midpoints and the points themselves become the controls, so a table of
+ * nine stations comes out as a body rather than as a polygon. A nose that is
+ * meant to be round is round.
+ */
+function rounded(given: readonly (readonly [number, number])[]): string {
+  const points = wound(given)
+  const mid = (a: readonly [number, number], b: readonly [number, number]): string =>
+    `${fixed((a[0] + b[0]) / 2)} ${fixed((a[1] + b[1]) / 2)}`
+
+  const last = points[points.length - 1]
+  const first = points[0]
+  if (!last || !first) return ""
+
+  let d = `M${mid(last, first)}`
+  for (let at = 0; at < points.length; at++) {
+    const here = points[at]
+    const next = points[(at + 1) % points.length]
+    if (!here || !next) continue
+    d += `Q${fixed(here[0])} ${fixed(here[1])} ${mid(here, next)}`
+  }
+
+  return `${d}Z`
+}
+
+/** A straight-sided piece, as its own subpath, wound the way the body is. */
+function piece(given: readonly (readonly [number, number])[]): string {
+  const points = wound(given)
+  if (points.length === 0) return ""
+
+  return `M${points.map(([x, y]) => `${fixed(x)} ${fixed(y)}`).join("L")}Z`
+}
+
+/** A bent spine, and where a thing standing on it at `x` has got to. */
+interface Spine {
+  /** Which way the spine runs at `x`, in radians. */
+  angleAt(x: number): number
+  /** How far off the straight the spine is at `x`. */
+  at(x: number): number
+  /** A point `lift` clear of the spine at `x`, square to the way it runs. */
+  clear(x: number, lift: number): [number, number]
+  /** Where the tail is joined on. */
+  readonly joint: number
+}
+
+/**
+ * The wave a swimming body carries, as a spine anything can be hung on.
+ *
+ * `fish_shape.ts`'s, cut down to what is wanted here: an envelope nearly still
+ * a fifth of the way back from the nose, growing the whole excursion into the
+ * wrist. Everything hung on the body asks this where its own station has got
+ * to, so a dorsal leans because the back under it leaned, and a tail sweeps
+ * because the peduncle swept. Nothing in here rotates a fin.
+ */
+function bend(kind: Swimmer, phase: number): Spine {
+  const { sweep, waves } = SWEEP[kind]
+  const joint = JOINTS[kind]
+  const run = 1 - joint
+  const camber = CAMBERS[kind]
+  const envelope = ENVELOPES[kind]
+
+  const at = (x: number): number => {
+    const u = Math.max(0, Math.min(1, (1 - x) / run))
+    return camber(u) + sweep * envelope(u) * Math.sin(2 * Math.PI * waves * u - phase)
+  }
+
+  const angleAt = (x: number): number => Math.atan2(at(x + SLOPE) - at(x - SLOPE), 2 * SLOPE)
+
+  return {
+    angleAt,
+    at,
+    clear(x, lift) {
+      const angle = angleAt(x)
+      return [x + Math.sin(angle) * lift, at(x) - Math.cos(angle) * lift]
+    },
+    joint,
+  }
+}
+
+/** A body lofted along its own bent spine, with whatever stands off it. */
+function swimmer(
+  kind: Swimmer,
+  table: readonly Station[],
+  phase: number,
+  fins: (spine: Spine, phase: number) => string,
+): string {
+  const spine = bend(kind, phase)
+
+  const over: [number, number][] = []
+  const under: [number, number][] = []
+  for (const station of table) {
+    over.push(spine.clear(station.x, station.over))
+    under.push(spine.clear(station.x, -station.under))
+  }
+
+  return rounded([...over, ...under.reverse()]) + fins(spine, phase)
+}
+
+/**
+ * The tail's own frame, carried by whatever the peduncle is doing.
+ *
+ * A tail is given in its own coordinates, tip astern at negative x, and this is
+ * what puts it on the end of the animal. Nothing about it is a rotation of a
+ * drawing: the joint has swung, so the fin joined to it has swung.
+ */
+function hung(spine: Spine): (point: readonly [number, number]) => [number, number] {
+  const angle = spine.angleAt(spine.joint)
+  const cos = Math.cos(angle)
+  const sin = Math.sin(angle)
+  const base = spine.at(spine.joint)
+
+  return ([x, y]) => [spine.joint + x * cos - y * sin, base + x * sin + y * cos]
+}
+
+/**
+ * The shark's fins, standing wherever the body has got to.
+ *
+ * The first dorsal is the one anybody actually reads, so it is tall and raked
+ * hard. The second dorsal and the anal are small, and they are there because a
+ * back with one fin on it reads as a dolphin. The tail is heterocercal, which
+ * is to say the upper lobe is much the longer, and that one asymmetry says
+ * shark from across a room.
+ */
+function sharkFins(spine: Spine): string {
+  const carry = hung(spine)
+
+  return (
+    piece([
+      spine.clear(0.32, 0.05),
+      spine.clear(0.13, 0.32),
+      spine.clear(0.03, 0.15),
+      spine.clear(-0.05, 0.05),
+    ]) +
+    piece([spine.clear(-0.3, 0.045), spine.clear(-0.37, 0.11), spine.clear(-0.44, 0.04)]) +
+    piece([spine.clear(-0.26, -0.04), spine.clear(-0.34, -0.11), spine.clear(-0.42, -0.03)]) +
+    piece([spine.clear(-0.04, -0.07), spine.clear(-0.13, -0.15), spine.clear(-0.2, -0.055)]) +
+    blade(spine.clear(0.46, -0.05), 2.95, 0.26, 0.045, -0.02) +
+    blade(spine.clear(0.42, -0.09), 2.55, 0.38, 0.055, 0.035) +
+    piece([
+      carry([0.04, 0]),
+      carry([-0.08, -0.06]),
+      carry([-0.36, -0.3]),
+      carry([-0.22, -0.045]),
+      carry([-0.2, 0.13]),
+      carry([-0.05, 0.035]),
+    ])
+  )
+}
+
+/**
+ * The dolphin's, which are three shapes and a fluke.
+ *
+ * The dorsal is falcate: it leans back off its own base into a hook, and that
+ * curve is what separates a dolphin from a shark's straight triangle at any
+ * distance where both are grey.
+ *
+ * The flukes are drawn spread rather than edge on, which is a small lie. A
+ * dolphin's tail is horizontal, so seen exactly side on it is a blade a few
+ * pixels deep; nobody has ever drawn one that way and nobody would read it.
+ *
+ * The lie is worth telling properly. Spread as a sharp fork of straight-edged
+ * lobes it is a tuna's tail, which is the animal it is trying not to be, so
+ * the planform is the one a dolphin actually has: swept back off a narrow
+ * peduncle, hollowed along the trailing edge into a crescent, and parted at
+ * the middle by a notch small enough to read as a nick rather than as a fork.
+ */
+function dolphinFins(spine: Spine): string {
+  const carry = hung(spine)
+
+  return (
+    piece([spine.clear(0.28, 0.13), spine.clear(0.03, 0.34), spine.clear(-0.08, 0.15)]) +
+    blade(spine.clear(0.46, -0.12), 2.4, 0.44, 0.06, 0.04) +
+    rounded([
+      carry([0.1, 0]),
+      carry([0.03, -0.07]),
+      carry([-0.09, -0.15]),
+      carry([-0.22, -0.21]),
+      carry([-0.33, -0.245]),
+      carry([-0.28, -0.19]),
+      carry([-0.22, -0.13]),
+      carry([-0.185, -0.07]),
+      carry([-0.16, -0.02]),
+      carry([-0.13, 0]),
+      carry([-0.16, 0.02]),
+      carry([-0.185, 0.07]),
+      carry([-0.22, 0.13]),
+      carry([-0.28, 0.19]),
+      carry([-0.33, 0.245]),
+      carry([-0.22, 0.21]),
+      carry([-0.09, 0.15]),
+      carry([0.03, 0.07]),
+    ])
+  )
+}
+
+/**
+ * A tapered blade from a root, at an angle, as a filled shape.
+ *
+ * What every flipper, wing and rowing fin here is made of. It tapers along a
+ * curve rather than along a straight line, and it carries a bow, so a limb has
+ * a trailing edge that gives. A rowing limb drawn as a triangle reads as an
+ * oar, which is a thing pinned to a boat rather than a thing joined to an
+ * animal.
+ */
+function blade(
+  root: readonly [number, number],
+  angle: number,
+  reach: number,
+  wide: number,
+  bow: number,
+): string {
+  const cos = Math.cos(angle)
+  const sin = Math.sin(angle)
+  const points: [number, number][] = []
+
+  const side = (way: number): void => {
+    for (let step = 0; step <= CURVE_STEPS; step++) {
+      const u = way > 0 ? step / CURVE_STEPS : 1 - step / CURVE_STEPS
+      const off = wide * (1 - u ** 1.4) * way + bow * Math.sin(u * Math.PI)
+      const along = u * reach
+
+      points.push([root[0] + along * cos - off * sin, root[1] + along * sin + off * cos])
+    }
+  }
+
+  side(1)
+  side(-1)
+
+  return rounded(points)
+}
+
+/** The shark, mid-stroke, nose at +x and two units nose to tail joint. */
+export const sharkBody = (stroke: number): string =>
+  swimmer("shark", SHARK, stroke * Math.PI * 2, sharkFins)
+
+/** The dolphin, the same way. */
+export const dolphinBody = (stroke: number): string =>
+  swimmer("dolphin", DOLPHIN, stroke * Math.PI * 2, dolphinFins)
+
+/**
+ * The middle of a fore flipper's swing, and how far either side of it the
+ * flipper gets.
+ *
+ * A turtle does not row like an oar. It flies, and the two halves of the beat
+ * are not the same event: the downstroke sweeps from above the shell to below
+ * it and is the whole of the thrust, and the recovery lifts the limb back up
+ * doing nothing. So the swing is wide, and what the eye follows is a flipper
+ * crossing the line of the shell twice a beat. The rear pair barely move: they
+ * are a rudder, and a turtle steering with them is a turtle turning, which this
+ * one is not.
+ */
+const TURTLE_SEAT = 0.7
+
+const TURTLE_SWING = 1.15
+
+/**
+ * How much of a beat pushes, and how much of it is spent going along with what
+ * the push did.
+ *
+ * Off wild green turtles filmed from a drone on the Great Barrier Reef rather
+ * than off a guess: van der Geest and colleagues, `Scientific Reports` 2022,
+ * put the limb beat cycle at 4.2 seconds and found the animal producing thrust
+ * for about three tenths of it, with the rest of the cycle a long low-drag
+ * glide. `HABITS.turtle.beat` is that cycle, and this is that share.
+ *
+ * It is the one number that makes a turtle read as a turtle rather than as a
+ * slow bird. An even beat is a wing. What the eye is actually looking for is a
+ * shove followed by a coast, and the shove has to be the short half.
+ */
+const TURTLE_PULL = 0.3
+
+/**
+ * Where a flipper is, and what it is doing, this far into a beat.
+ *
+ * One statement of the rhythm for both halves of the animal, since the drawing
+ * and the going along are the same event: a turtle that is drawn shoving and
+ * not moving any faster for it is a turtle on a conveyor.
+ *
+ * The phase runs through half a turn while it pushes and the other half while
+ * it recovers, so the same swing takes a third of the time going down as coming
+ * back up. Each half eases in and out of its ends, because a flipper does not
+ * change direction in a frame, and the pause at the top and the bottom is where
+ * a real one spends its stages.
+ *
+ * A phase of nothing is the flipper at the top, and half a turn is the flipper
+ * at the bottom, so the push is the half that goes downwards. That is the way
+ * round it has to be: the stroke that moves the animal is the one sweeping down
+ * and back against the water, and a turtle drawn lifting on the short half and
+ * sinking through the long one is a turtle whose limbs are hanging off it.
+ *
+ * `feather` is how far the limb has turned edge-on, which is nothing at all
+ * through the push and most of the way over in the middle of the recovery. It
+ * is the other half of why a beat has two halves: the same limb at the same
+ * angle going up and going down is the same drawing, and what tells them apart
+ * is that one of them is broadside and slow and the other is thin and quick.
+ */
+function turtleBeat(cycle: number): {
+  feather: number
+  phase: number
+  thrust: number
+  trail: number
+} {
+  const at = cycle - Math.floor(cycle)
+  const ease = (part: number): number => (1 - Math.cos(Math.PI * part)) / 2
+
+  if (at < TURTLE_PULL) {
+    const through = at / TURTLE_PULL
+    return {
+      feather: 0,
+      phase: Math.PI * ease(through),
+      thrust: Math.sin(Math.PI * through),
+      trail: turtleHeave(cycle),
+    }
+  }
+
+  const back = (at - TURTLE_PULL) / (1 - TURTLE_PULL)
+  return {
+    feather: Math.sin(Math.PI * back),
+    phase: Math.PI + Math.PI * ease(back),
+    thrust: 0,
+    trail: turtleHeave(cycle),
+  }
+}
+
+/**
+ * How much faster a turtle is going while it is pushing than while it is not.
+ *
+ * A beat that is three parts glide is a beat the animal is losing way through,
+ * so the crossing is not a constant speed with a flipper waving over it. The
+ * mean is left alone: what this does is take from the glide and give to the
+ * stroke, so the same crossing takes the same time and stops looking towed.
+ */
+const TURTLE_SURGE = 0.55
+
+/** The mean thrust over a whole beat, which is the pace the animal was given. */
+const TURTLE_HELD = (2 * TURTLE_PULL) / Math.PI
+
+/** What a kind's speed is worth this far into its own beat, 1 being its mean. */
+function driven(kind: VisitKind, cycle: number): number {
+  if (kind !== "turtle") return 1
+
+  // The mean of half a sine over the share of the beat that has one, which is
+  // what has to come back off so the animal keeps the pace it was given.
+  return 1 + TURTLE_SURGE * (turtleBeat(cycle).thrust - TURTLE_HELD)
+}
+
+/**
+ * How far a turtle has risen off its own course, this far into a beat.
+ *
+ * The limbs are not the animal. A flipper sweeping down against the water
+ * shoves the whole turtle up, and the long glide after it is the animal slowly
+ * losing that height again, so a beat is a small climb and a long sink. Leave
+ * this out and every limb in the drawing can be right and the turtle still
+ * reads as a cutout going along a rail, because that is what it is: a rigid
+ * shell holding one height while something waves underneath it.
+ *
+ * The rise is the thrust added up, with the mean pace taken back off, which is
+ * the same arithmetic `driven` does to the speed and for the same reason. Doing
+ * it in closed form rather than by keeping a running total is what makes the
+ * loop close: a beat that ends anywhere but where it started leaves a turtle
+ * climbing out of the picture over a crossing.
+ *
+ * Zero at the top and the bottom of the range, and centred, so what comes out
+ * is a share of a body either side of the course.
+ */
+function turtleHeave(cycle: number): number {
+  const at = cycle - Math.floor(cycle)
+  const most = (2 * TURTLE_PULL * (1 - TURTLE_PULL)) / Math.PI
+
+  const raised =
+    at < TURTLE_PULL
+      ? (TURTLE_PULL / Math.PI) * (1 - Math.cos((Math.PI * at) / TURTLE_PULL)) - TURTLE_HELD * at
+      : most - TURTLE_HELD * (at - TURTLE_PULL)
+
+  return raised / most - 0.5
+}
+
+/**
+ * How much of its own size a turtle rises and falls over one beat, and how far
+ * it pitches doing it.
+ *
+ * Both are small. What they are for is that the animal is being pushed rather
+ * than carried: it gains a little on the stroke and gives it back through the
+ * glide, and it is nose up while it is gaining and nose down while it is not.
+ * A tenth of a body and seven degrees is under the threshold at which anybody
+ * would call it bobbing, and over the one at which the thing stops looking
+ * towed.
+ */
+const TURTLE_HEAVE = 0.1
+
+const TURTLE_PITCH = 0.12
+
+/**
+ * How far a turtle's beat wanders either side of its own, and how many times it
+ * does that over a crossing.
+ *
+ * A turtle does not beat to a metronome. It works at it for a few strokes and
+ * then hangs there doing very little, and the difference between those two is
+ * most of what says animal rather than mechanism. Drawn as a slow wander rather
+ * than as meshing gears, because a rate that changes inside one frame is a
+ * flipper that jumps, and a jump reads as a dropped frame rather than as a rest.
+ */
+const TURTLE_BOUT = 0.55
+
+const TURTLE_BOUTS = 6
+
+/** How fast this one is working its own beat, this far into its crossing. */
+function paced(one: Visitor): number {
+  if (one.kind !== "turtle") return one.pace
+
+  // Off `along` and its own `pace` rather than a clock, so the wander is a
+  // thing the animal is doing over its crossing and two of them are never in
+  // step: the pace sets the rate and starts the wander somewhere of its own.
+  return (
+    one.pace * (1 + TURTLE_BOUT * Math.sin(2 * Math.PI * (TURTLE_BOUTS * one.along + one.pace)))
+  )
+}
+
+/** How far off its course a kind's own beat carries it, in its own sizes. */
+function heaved(kind: VisitKind, cycle: number): number {
+  return kind === "turtle" ? TURTLE_HEAVE * turtleHeave(cycle) : 0
+}
+
+/** How far a kind's own beat tips its nose off the course it is following. */
+function pitched(kind: VisitKind, cycle: number): number {
+  if (kind !== "turtle") return 0
+
+  // Nose up while it is climbing, which is while it is pushing. The same number
+  // the rise is made of, so the two cannot disagree about which way it is going.
+  return -TURTLE_PITCH * (turtleBeat(cycle).thrust - TURTLE_HELD)
+}
+
+/**
+ * How far the rear pair shift, and it is deliberately almost nothing.
+ *
+ * A grown sea turtle swims on its fore flippers alone. The rear pair are a
+ * rudder and elevators: they trail, they hold the line, and they come
+ * into it when the animal turns, which this one is not doing. Beating them in
+ * time with the fore pair is the single thing that makes a turtle read as
+ * something rowing, so what little they do here follows the body's own rise
+ * rather than the stroke that drives it.
+ */
+const TURTLE_REAR = 0.06
+
+/**
+ * How far behind the near pair the far pair is, as a share of a beat.
+ *
+ * Not half of one, which is what this was and what made the animal read as
+ * something crawling. A turtle's fore flippers are wings and they beat
+ * together: an alternating pair is a gait, and a gait is a thing with feet.
+ * What separates the two sides on a silhouette is that the far one is shorter,
+ * seated higher and a moment behind, and a moment is all this is.
+ */
+const TURTLE_LAG = 0.06
+
+/** How much of its length a flipper loses when it turns edge-on to come back. */
+const TURTLE_FEATHER = 0.22
+
+/**
+ * The turtle, from the side, mid-stroke.
+ *
+ * The shell is the animal and it does not bend, so this is the one drawing here
+ * with no spine in it: a dome, a head on a short neck, and four limbs hung off
+ * it. The fore flippers are what the eye follows. The far pair are drawn first
+ * and half a beat behind, which is the whole of what tells a reader they are on
+ * the other side of the animal.
+ */
+export function turtleBody(stroke: number): string {
+  const near = turtleBeat(stroke)
+  const far = turtleBeat(stroke - TURTLE_LAG)
+
+  /**
+   * One fore flipper, at whatever it is doing this far into the beat.
+   *
+   * The angle is the obvious half, and it is the one the eye reads: the limb
+   * comes up past the line of the shell and goes down past it again. The rest
+   * of it is the feathering, which is what keeps the two crossings from being
+   * the same drawing: the limb is broadside on the stroke that pushes and
+   * turned edge-on for the one that does not, so it is shorter, thinner and
+   * flatter on the way back up.
+   */
+  const oar = (
+    root: readonly [number, number],
+    beat: { feather: number; phase: number },
+    reach: number,
+    wide: number,
+  ): string => {
+    const turned = 1 - TURTLE_FEATHER * beat.feather
+
+    return blade(
+      root,
+      TURTLE_SEAT - TURTLE_SWING * Math.cos(beat.phase),
+      reach * turned,
+      wide * turned,
+      0.06 * (1 - 0.6 * beat.feather),
+    )
+  }
+
+  return (
+    // The far pair first, so the near pair is drawn over them. They are the
+    // same limbs half a beat behind, which is the whole of what tells a reader
+    // they are on the other side of the animal.
+    oar([0.29, -0.01], far, 0.7, 0.085) +
+    blade([-0.6, 0.06], 2.5 + TURTLE_REAR * far.trail, 0.26, 0.06, 0.02) +
+    rounded([
+      [0.45, -0.1],
+      [0.2, -0.28],
+      [-0.15, -0.32],
+      [-0.5, -0.24],
+      [-0.88, -0.02],
+      [-0.55, 0.14],
+      [-0.15, 0.2],
+      [0.25, 0.16],
+      [0.48, 0.06],
+    ]) +
+    rounded([
+      [0.42, -0.05],
+      [0.66, -0.11],
+      [0.88, -0.12],
+      [1.02, -0.03],
+      [1.02, 0.06],
+      [0.86, 0.12],
+      [0.62, 0.12],
+      [0.44, 0.1],
+    ]) +
+    oar([0.38, 0.07], near, 0.84, 0.115) +
+    blade([-0.62, 0.11], 2.5 + TURTLE_REAR * near.trail, 0.3, 0.07, 0.02)
+  )
+}
+
+/**
+ * How wide a manta is against its own length, and how far a wing folds away.
+ *
+ * A manta is a good deal wider than it is long, and drawn square it is a skate.
+ * `MANTA_FOLD` is how much of a wing comes in at the top of a beat, and it is
+ * foreshortening rather than a fold: seen from below, a wing that has beaten up
+ * is pointing away from you, so what reaches the eye is a shorter wing with a
+ * curve along its leading edge. That is the whole of the animation, and it is
+ * why this one is drawn from below while the rest are drawn from the side.
+ */
+const MANTA_SPAN = 1.95
+
+const MANTA_FOLD = 0.34
+
+/** How far a wing tip trails behind the shoulder that is driving it. */
+const MANTA_LAG = 0.1
+
+/**
+ * The manta, from below, mid-beat.
+ *
+ * Two units from the horns to the root of the tail, and getting on for twice
+ * that across, which is the first thing to get right: a manta is much wider
+ * than it is long and drawn square it is a skate. The wings are swept, so a tip
+ * sits well behind the shoulder it grew from, and the trailing edge falls away
+ * behind it. A diamond with none of that is a kite.
+ *
+ * The horns are small and they are most of the animal's name. A disc with two
+ * points on its leading edge is a manta; a disc without them is a ray of some
+ * sort.
+ */
+export function mantaBody(stroke: number): string {
+  const beat = Math.sin(stroke * Math.PI * 2)
+  const span = MANTA_SPAN * (1 - MANTA_FOLD * Math.abs(beat))
+  const bow = 0.22 * beat
+  // A wing tip is not rigid and does not keep up with the shoulder driving it.
+  // It trails furthest when the wing is moving fastest, which is as it passes
+  // level, and further on the way up than on the way down. Without it the two
+  // level moments of a beat are the same drawing and the animal has half the
+  // beat it should have.
+  const lag = -MANTA_LAG * (1 + 0.8 * Math.cos(stroke * Math.PI * 2))
+
+  /** One wing, shoulder to tip and back along the trailing edge to the tail. */
+  const wing = (side: number): [number, number][] => {
+    const tip: [number, number] = [-0.22 + lag, side * (span + bow)]
+
+    return [
+      [0.9, side * 0.3],
+      [0.42, side * (0.6 * span + bow * 0.4)],
+      [0.05, side * (0.9 * span + bow * 0.8)],
+      // Twice, so the corner survives the smoothing. A rounded wing tip is a
+      // ray of some other sort, and the eye reads the tips before anything else.
+      tip,
+      tip,
+      [-0.5, side * (0.5 * span + bow * 0.4)],
+      [-0.74, side * 0.34],
+    ]
+  }
+
+  const horn = (side: number): string =>
+    piece([
+      [0.96, side * 0.3],
+      [1.28, side * (0.4 + 0.06 * beat)],
+      [1.22, side * 0.22],
+      [0.94, side * 0.14],
+    ])
+
+  return (
+    rounded([
+      [1.02, -0.24],
+      [1.04, 0],
+      [1.02, 0.24],
+      ...wing(1),
+      [-0.92, 0.12],
+      [-0.92, -0.12],
+      ...wing(-1).reverse(),
+    ]) +
+    horn(1) +
+    horn(-1) +
+    piece([
+      [-0.86, -0.035],
+      [-1.9, -0.012 - 0.05 * beat],
+      [-1.91, 0.006 - 0.05 * beat],
+      [-0.86, 0.035],
+    ])
+  )
+}
+
+/**
+ * The mermaid, from the side, below the neck.
+ *
+ * She is a woman, and in profile that is four numbers rather than any detail: a
+ * shoulder narrower than the hip below it, a bust standing forward of the ribs,
+ * a waist under both, and hips wider than the shoulder. Nothing else in a
+ * silhouette carries it. The first version of this table was a swimmer's torso
+ * of no particular kind and it read as a seal.
+ *
+ * Every one of them had to be pushed past what a body actually measures. The
+ * smoothing this file draws with runs the outline through the midpoints between
+ * stations, so a pinch written at its true depth comes out at half of it, and a
+ * waist at half depth is not a waist, it is a body. The waist is stated twice
+ * for the same reason: a station repeated is a station the curve has to reach.
+ * The bust is on the `under` column alone, because a chest that is deep both
+ * ways is a barrel.
+ *
+ * Past the hips the tail is thicker than the woman above it, which is the other
+ * half of the read. Two halves of the same girth are one animal. The step at
+ * the hip is what makes them two.
+ *
+ * The head is not in here. It is `HEAD`, laid on the front of this as a shape
+ * of its own, because a head averaged into a shoulder is a shoulder. What is
+ * here instead is a neck: two stations of almost nothing, running forward far
+ * enough to be swallowed by the head that sits over them.
+ */
+const MERMAID: readonly Station[] = [
+  { over: 0.04, under: 0.037, x: 0.83 },
+  { over: 0.036, under: 0.033, x: 0.765 },
+  { over: 0.082, under: 0.055, x: 0.685 },
+  { over: 0.08, under: 0.082, x: 0.6 },
+  { over: 0.078, under: 0.128, x: 0.52 },
+  { over: 0.074, under: 0.115, x: 0.46 },
+  { over: 0.05, under: 0.05, x: 0.34 },
+  { over: 0.046, under: 0.046, x: 0.29 },
+  { over: 0.125, under: 0.14, x: 0.12 },
+  { over: 0.125, under: 0.132, x: -0.02 },
+  { over: 0.105, under: 0.105, x: -0.18 },
+  { over: 0.078, under: 0.076, x: -0.34 },
+  { over: 0.05, under: 0.048, x: -0.48 },
+  { over: 0.028, under: 0.026, x: -0.62 },
+]
+
+/**
+ * The head, on the front of the neck, in the body's own coordinates.
+ *
+ * A skull and a jaw and nothing else: at this distance an ear is an invention
+ * and a nose is two pixels. What has to survive is that it is longer than it is
+ * deep, that the back of it overhangs the neck, and that the chin stands
+ * forward of the throat, because those three are what separate a head from the
+ * end of a shoulder.
+ *
+ * It is carried above the line of the body and tipped nose up, which is not a
+ * flourish. Anybody swimming face down is looking along their own eyebrows, so
+ * the head rides high and the chin comes off the chest, and the gap that opens
+ * under it is the throat. That gap is doing more work than the head is: laid
+ * level, the chin sits on the collarbone, and what is left is a bump on the
+ * front of a shoulder.
+ *
+ * It is drawn a good deal larger than a head measures against a body this long,
+ * and that is deliberate. Everything else about her is legible at any size and
+ * a head at its true share is four px of the drawing, which is a smudge with
+ * the whole argument resting on it.
+ */
+const HEAD: readonly (readonly [number, number])[] = [
+  [1.046, -0.08],
+  [0.999, -0.132],
+  [0.929, -0.153],
+  [0.852, -0.142],
+  [0.785, -0.089],
+  [0.773, -0.01],
+  [0.824, 0.049],
+  [0.903, 0.066],
+  [0.981, 0.045],
+  [1.038, -0.011],
+]
+
+/** How much of a wave there is along a lock, per unit of its length. */
+const HAIR_WAVES = 1.15
+
+/** Where the hair is rooted. */
+const HAIR_ROOT = 0.9
+
+/** How many points a lock is drawn through, along one edge of it. */
+const HAIR_STEPS = 9
+
+/** How far the hair falls away behind her, and over what length it does it. */
+const HAIR_FALL = 0.12
+const HAIR_REACH = 0.9
+
+/** How much further apart the locks are at the ends than at the roots. */
+const HAIR_SPREAD = 0.9
+
+/**
+ * The line the hair streams along, this far back of the crown.
+ *
+ * Every lock shares it, and that is what makes them one head of hair rather
+ * than ten things that happen to start in the same place. It leaves the crown
+ * flat and settles towards her back, because she is arched: the body drops away
+ * under the line she is travelling, and hair that kept going straight would end
+ * up flying a body's width above her.
+ */
+function streaming(back: number): number {
+  return HAIR_FALL * Math.min(1, Math.max(0, back) / HAIR_REACH) ** 1.3 - 0.105
+}
+
+/**
+ * One lock of hair.
+ *
+ * `at` is where it leaves the scalp and `lift` is how far off the streamline it
+ * rides there, both in the crown's frame, where negative is up. `dense` puts a
+ * lock in the silhouette rather than in the veil, which is what the fat short
+ * ones nearest the head get: hair packs where it grows and separates as it
+ * goes, so the mass on her shoulders stops light the way her head does and only
+ * what has left the mass is sheer.
+ *
+ * The dense ones are also what covers her skull, so their lifts are a stack:
+ * each overlaps the one under it by more than the beat can ever move them
+ * apart, and the bottom one is buried in her head. A separate shape for the
+ * scalp, which is what this had first, leaves a pocket of water wherever its
+ * end fails to meet a lock, and the end moves.
+ */
+type Lock = {
+  at: number
+  dense: boolean
+  lift: number
+  long: number
+  off: number
+  swing: number
+  wide: number
+}
+
+/**
+ * Her hair, lock by lock.
+ *
+ * The first pass drew it as one shape at one weight, which is what everything
+ * else in this water is, and it read as a scarf. Hair is not a shape. It is
+ * many things of the same shape that agree about where they start and disagree
+ * about everything after, and the disagreement is the whole of what makes it
+ * read: two locks crossing tell you they are separate, and a mass that parts at
+ * the ends tells you it is fine. Thinning one outline tells you nothing, so no
+ * amount of weight was ever going to buy this.
+ *
+ * The fat ones are the mass and are short. The fine ones are what has come out
+ * of the mass, and they are the long ones, because a lock only gets to wander
+ * once nothing is holding it. They overlap into one thing at the roots, since
+ * `wound` merges what overlaps rather than cutting it, and they come apart past
+ * the shoulders where they are on their own.
+ */
+const LOCKS: readonly Lock[] = [
+  { at: 0.95, dense: true, lift: 0.035, long: 0.42, off: 0.2, swing: 0.02, wide: 0.05 },
+  { at: 0.93, dense: true, lift: -0.005, long: 0.55, off: 0.8, swing: 0.03, wide: 0.052 },
+  { at: 0.91, dense: true, lift: -0.032, long: 0.5, off: 1.5, swing: 0.035, wide: 0.048 },
+  { at: 0.89, dense: true, lift: -0.052, long: 0.4, off: 2.2, swing: 0.03, wide: 0.04 },
+  { at: 0.93, dense: false, lift: 0.035, long: 0.72, off: 2.0, swing: 0.05, wide: 0.032 },
+  { at: 0.89, dense: false, lift: -0.06, long: 0.86, off: 2.6, swing: 0.075, wide: 0.03 },
+  { at: 0.92, dense: false, lift: -0.005, long: 0.95, off: 3.3, swing: 0.06, wide: 0.034 },
+  { at: 0.86, dense: false, lift: -0.075, long: 0.68, off: 4.0, swing: 0.085, wide: 0.024 },
+  { at: 0.9, dense: false, lift: 0.05, long: 1.04, off: 4.7, swing: 0.07, wide: 0.026 },
+  { at: 0.88, dense: false, lift: -0.035, long: 1.12, off: 5.5, swing: 0.09, wide: 0.022 },
+]
+
+/**
+ * One lock, this far into the beat.
+ *
+ * The wave is measured along the lock's own length rather than along its share
+ * of itself, so a long lock gets more of a wave than a short one instead of the
+ * same wave stretched, and it opens from nothing at the root: hair moves at the
+ * end it is not held by.
+ */
+function lock(spine: Spine, phase: number, hair: Lock): string {
+  const crown = spine.at(HAIR_ROOT)
+  const over: [number, number][] = []
+  const under: [number, number][] = []
+
+  for (let step = 0; step <= HAIR_STEPS; step += 1) {
+    const along = step / HAIR_STEPS
+    const back = HAIR_ROOT - hair.at + hair.long * along
+    const wave = Math.sin(2 * Math.PI * HAIR_WAVES * along * hair.long - phase - hair.off)
+    const half = hair.wide * (1 - along) ** 0.55
+    const y =
+      crown +
+      streaming(back) +
+      hair.lift * (1 + HAIR_SPREAD * along) +
+      hair.swing * along * along * wave
+
+    over.push([hair.at - hair.long * along, y - half])
+    under.push([hair.at - hair.long * along, y + half])
+  }
+
+  return rounded([...over, ...under.reverse()])
+}
+
+/** The locks of one density, at this point in the beat, as one drawing. */
+function hair(stroke: number, dense: boolean): string {
+  const phase = stroke * Math.PI * 2
+  const spine = bend("mermaid", phase)
+
+  return LOCKS.filter((each) => each.dense === dense)
+    .map((each) => lock(spine, phase, each))
+    .join("")
+}
+
+/**
+ * An arm, in its two pieces, as shares of reach and of thickness.
+ *
+ * `blade` is what every other limb in this file is made of and it is wrong for
+ * this one. A fin tapers to a point because a fin is a fin; an arm does not,
+ * and drawn that way it came out as a whisker off the chest. An arm at this
+ * size is a bar that thins into the wrist and then widens again, and that one
+ * widening is the whole of what makes it an arm rather than a stick.
+ *
+ * Three pieces rather than one because of what a straight one looked like,
+ * which was a pole hung off a body. An elbow is the joint nothing else in this
+ * water has, and a limb with a bend in it is read as a limb before anything
+ * else about the animal is read at all.
+ */
+const UPPER_ARM: readonly (readonly [number, number])[] = [
+  [0, 1],
+  [0.5, 0.88],
+  [1, 0.8],
+]
+
+/** The forearm, which is a taper into the wrist and nothing else. */
+const FOREARM: readonly (readonly [number, number])[] = [
+  [0, 0.86],
+  [0.42, 0.72],
+  [0.75, 0.58],
+  [1, 0.48],
+]
+
+/**
+ * The hand, off the end of it.
+ *
+ * A piece of its own, and the whole of the reason is the angle. The first one
+ * was the last two stations of the forearm, pinched at the wrist and swelled
+ * again past it, and what that draws is a bulb on a stick. A hand is not wider
+ * than the arm it is on and that is not what makes it read: what makes it read
+ * is that it is not in line with the arm. A wrist bends, and a shape that
+ * leaves the forearm at an angle is a hand before it is anything else.
+ *
+ * Short and blunt. Fingers at this distance are one shape, and a hand drawn to
+ * a point is a knife.
+ */
+const HAND: readonly (readonly [number, number])[] = [
+  [0, 0.72],
+  [0.32, 0.8],
+  [0.7, 0.72],
+  [1, 0.34],
+]
+
+/**
+ * Where an arm is held, how far it swings, how far it reaches, how thick.
+ *
+ * Held forward and down rather than back along the body, which is the pose that
+ * survives being a silhouette: an arm laid against the ribs is inside the
+ * outline and the animal has none. Rooted at the chest rather than at the top
+ * of the shoulder for the same kind of reason, since an arm off the shoulder
+ * crosses the throat, and the throat is the gap that says this is a head on a
+ * neck.
+ *
+ * The swing is a share of a turn per stroke, which makes the arms look driven
+ * by the tail. They are not driving anything and they are not meant to: what
+ * moves them is the same body the tail is joined to.
+ */
+const ARM_SEAT = 0.58
+
+const ARM_SWING = 0.2
+
+/** How much lower than the near arm the far one is carried. */
+const ARM_APART = 0.34
+
+const ARM_REACH = 0.5
+
+const ARM_GIRTH = 0.042
+
+/** How much of an arm is above the elbow, and how far the elbow is bent. */
+const ARM_UPPER = 0.46
+
+const ARM_BEND = 0.5
+
+/**
+ * How far the hand falls away from the forearm, how long it is, and how far
+ * back up the forearm it is rooted.
+ *
+ * Rooted short of the wrist rather than on it, which is not anatomy, it is
+ * arithmetic: two shapes meeting end to end at an angle leave a wedge open on
+ * the outside of the turn, and a wedge in a filled outline is a hole. Started
+ * inside the forearm, the joint is covered whatever the angle does.
+ */
+const ARM_WRIST = 0.34
+
+const ARM_HAND = 0.26
+
+const ARM_JOINT = 0.86
+
+/** How much of the near arm the far one is, being on the other side of her. */
+const ARM_FAR = 0.84
+
+/** A limb of nearly one thickness, out from a root at an angle. */
+function limb(
+  taper: readonly (readonly [number, number])[],
+  root: readonly [number, number],
+  angle: number,
+  reach: number,
+  wide: number,
+): string {
+  const cos = Math.cos(angle)
+  const sin = Math.sin(angle)
+  const at = (along: number, off: number): [number, number] => [
+    root[0] + along * cos - off * sin,
+    root[1] + along * sin + off * cos,
+  ]
+
+  return rounded([
+    ...taper.map(([along, thick]) => at(along * reach, thick * wide)),
+    ...[...taper].reverse().map(([along, thick]) => at(along * reach, -thick * wide)),
+  ])
+}
+
+/**
+ * The head, the hair, the arms, the veils and the fluke, wherever she has got
+ * to.
+ *
+ * The far arm is drawn first and shorter and half a beat behind, which is the
+ * same lie the turtle's far flippers tell and it is what gives an outline two
+ * sides. Everything else is one thing each, because a silhouette has one of
+ * everything a silhouette can see.
+ */
+function mermaidFins(spine: Spine, phase: number): string {
+  const carry = hung(spine)
+
+  /** One arm, out from the shoulder at whatever the beat has it doing. */
+  const arm = (turn: number, reach: number, under: number): string => {
+    const root = spine.clear(0.6, -0.04)
+    const shoulder = ARM_SEAT + under + ARM_SWING * Math.sin(turn)
+    const upper = reach * ARM_UPPER
+    const held = shoulder - ARM_BEND
+    const elbow: [number, number] = [
+      root[0] + Math.cos(shoulder) * upper,
+      root[1] + Math.sin(shoulder) * upper,
+    ]
+    const wrist: [number, number] = [
+      elbow[0] + Math.cos(held) * (reach - upper) * ARM_JOINT,
+      elbow[1] + Math.sin(held) * (reach - upper) * ARM_JOINT,
+    ]
+
+    return (
+      limb(UPPER_ARM, root, shoulder, upper, ARM_GIRTH) +
+      limb(FOREARM, elbow, held, reach - upper, ARM_GIRTH * 0.9) +
+      limb(HAND, wrist, held + ARM_WRIST, reach * ARM_HAND, ARM_GIRTH * 0.84)
+    )
+  }
+
+  return (
+    arm(phase + Math.PI, ARM_REACH * ARM_FAR, ARM_APART) +
+    rounded(HEAD.map(([x, y]) => spine.clear(x, -y))) +
+    hair(phase / (Math.PI * 2), true) +
+    arm(phase, ARM_REACH, 0) +
+    blade(spine.clear(-0.28, 0.06), 3.48, 0.22, 0.032, 0.055) +
+    blade(spine.clear(-0.28, -0.06), 2.66, 0.22, 0.032, -0.055) +
+    rounded([
+      carry([0.08, 0]),
+      carry([-0.03, -0.09]),
+      carry([-0.14, -0.2]),
+      carry([-0.26, -0.3]),
+      carry([-0.4, -0.36]),
+      carry([-0.38, -0.25]),
+      carry([-0.33, -0.14]),
+      carry([-0.26, -0.06]),
+      carry([-0.21, -0.02]),
+      carry([-0.18, 0]),
+      carry([-0.21, 0.02]),
+      carry([-0.26, 0.06]),
+      carry([-0.33, 0.14]),
+      carry([-0.38, 0.25]),
+      carry([-0.4, 0.36]),
+      carry([-0.26, 0.3]),
+      carry([-0.14, 0.2]),
+      carry([-0.03, 0.09]),
+    ])
+  )
+}
+
+/** The mermaid, mid-stroke, drawn the way every other swimmer here is. */
+export const mermaidBody = (stroke: number): string =>
+  swimmer("mermaid", MERMAID, stroke * Math.PI * 2, mermaidFins)
+
+/**
+ * Her hair, mid-stroke, as a drawing of its own.
+ *
+ * The locks that have left the mass, and only those: the rest of her hair is in
+ * the silhouette with her head. Everything else in this water stops the light
+ * and comes out as one flat shape, which is what a body at eight metres does.
+ * The loose end of a head of hair does not: it is a fine mass, the light goes
+ * through as much of it as it catches, and what reaches the eye is softer than
+ * the head it grew out of. So it is handed over separately for a renderer to
+ * lay in under the animal at a share of the animal's own weight; `VEILS` has
+ * the contract.
+ */
+export const mermaidHair = (stroke: number): string => hair(stroke, false)
+
+/**
+ * Each animal's drawing, by kind, so a renderer needs to know none of the above.
+ *
+ * It asks for the animal it has been handed at the stroke it is at, and gets a
+ * path in a body two units long with the nose at +x. What it does about
+ * mirroring and turning is `Visitor.tilt`, which is the contract every other
+ * animal in this water keeps.
+ */
+export const BODIES: Readonly<Record<VisitKind, (stroke: number) => string>> = {
+  dolphin: dolphinBody,
+  manta: mantaBody,
+  mermaid: mermaidBody,
+  shark: sharkBody,
+  turtle: turtleBody,
+}
+
+/**
+ * What the light gets through, by kind, for the kinds that have any.
+ *
+ * A second drawing, laid in behind the animal's own and at a share of its
+ * weight. It exists because one of these is not all body. An animal is a shape
+ * the light stops, which is why everything here is a silhouette and why one
+ * flat weight is the honest way to draw one; hair is a fine mass that scatters
+ * light rather than stopping it, so a head of it reads softer than the head
+ * under it, and drawn at the body's own weight it is a helmet.
+ *
+ * Behind rather than over, so the part lying on her back and shoulders is
+ * covered by the body at full weight and only what is streaming free is sheer.
+ * Painted over instead, the overlap comes out as a pale stripe down the animal.
+ *
+ * A renderer that draws `BODIES` and skips this is not drawing a plainer
+ * mermaid, it is drawing a bald one. Both or neither.
+ */
+export const VEILS: Readonly<Partial<Record<VisitKind, (stroke: number) => string>>> = {
+  mermaid: mermaidHair,
+}
+
+/**
+ * How much of the animal's own weight a veil is drawn at.
+ *
+ * Enough to read as its own thing against the body and not so little that it
+ * goes back into the water. It is a share rather than a weight of its own
+ * because everything about a visitor already fades with distance and with the
+ * ends of its crossing, and hair that did not fade with the rest of her would
+ * be a wig arriving separately.
+ */
+export const VEIL_INK = 0.55