The body map

One SVG system (art.js) serves two jobs, which is why the app feels cohesive: the fatigue heatmap on the Body screen, and every exercise's "image" (its muscle diagram). Build the figure once; reuse it everywhere.

Where the anatomy comes from

The figure is a detailed anatomical muscle chart — 89 striated regions across front and back (pecs, serratus, the ab grid, the three deltoid heads, biceps/triceps, lats, spinal erectors, glutes, hamstrings, gastrocnemius/soleus, and so on). The path geometry is adapted from the open-source vulovix/body-muscles (Apache-2.0).

Only the static SVG path data is embedded — there is no runtime dependency (no React, no package installed). A one-off generation step mapped the upstream's 89 region ids onto Forge's 16 fatigue muscle groups and wrote bodymap-data.js:

{ VIEWBOX: { front: "0 0 35 93", back: "37 0 35 93", both: "0 0 72 93" },
  FRONT: [ { g: "chest", d: "M…" }, … ],   // g = Forge muscle key | null
  BACK:  [ … ] }

g is the Forge muscle key the region belongs to (e.g. chest-upper-left, chest-lower-right → chest), or null for structural bits (head, hands, joints) that are always cold steel. Attribution + the Apache-2.0 NOTICE live in THIRD_PARTY_NOTICES.md.

Why this, and why not photos

The earlier version was a hand-drawn bezier figure (16 simple bellies); this is a big step up in realism while keeping the exact same contract. Realistic photographic / medical anatomy was rejected on purpose: it isn't segmented into named recolourable muscles (so it can't be heat-tinted per group) and it clashes with the dark machined aesthetic. Vector segmented art is the only thing that "works the same way."

Colouring = the thermal contract

bodyMap(fatigue, opts) takes { muscleKey: {pct, tier} } and fills each region with the heat colour for its g's tier (HEAT[0..4], cold→molten), opacity scaling with tier; structural regions stay steel. Muscles at tier ≥3 get a second pass through a Gaussian-blur filter for the glow/bloom — the payoff of "glows where worked". A pct > 100 reading renders white-hot. The tiers come from engine.fatigueTier(), so the heatmap, the muscle-list bars, and the design system's thermal ramp all agree by construction.

The two upstream views are authored to tile side-by-side (front x 0–35, back x 37–72), so "both views" is just one <svg viewBox="0 0 72 93"> with no coordinate juggling; a single view crops via its own viewBox.

Two callers, one renderer

• Body screen → bodyMap(fatigueFromEngine, {views:['front','back']}).
• Exercise image → muscleDiagram(exercise) — fakes a "fatigue" map from the exercise's muscle contributions (prime mover hot, assists cool), then calls bodyMap, auto-picking the view(s) that actually contain the worked muscles. So a lift's picture is literally which muscles it lights up.

Bonus: the plate-math glyph

plateGlyph(weight) renders a target weight as a loaded barbell — plates per side computed greedily from [25,20,15,10,5,2.5,1.25] off a 20 kg bar — so a barbell number also looks like its plates.