Run Detail
completedclaude-fable-5.1Recorded for these videos
47:51Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)
Nov 6, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
16:45DeepSeek V4.1 Flash Is Shockingly Good for the Price
Sep 10, 2026 · YouTube
17:14How much better is GPT-6 Astra over Claude Opus 5? Real Website and Coding Tests
Sep 5, 2026 · YouTube
29:13Implementing a multiplayer game with GPT-6 Astra (+ Gemini 3.8, Opus 5, Sol Pro)
Sep 5, 2026 · YouTube
19:42Meta Muse Spark 1.3 Review: A Huge Leap Forward
Sep 2, 2026 · YouTube
17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
Provider
openrouter
Challenge Version
v3.0
Turns
1
Duration
Batched — not timed
Total Tokens
60,812
Input Tokens
812
Output Tokens
60,000
Reasoning Tokens
35,461
Reasoning Effort
medium
Est. Cost
$1.5041
Started
9/10/2026, 11:47:56 AM
OR Provider
Anthropic
Finish Reason
length
Generation ID
gen-batch-1789040876-7f0cc8f2348bb1db90bf
Turns (1)
Turn #1
812 in60,000 out35,461 reasoning60,812 total
user
Build one self-contained HTML page for a museum armoury exhibit: a standing figure and a slider that re-equips that same figure across three periods of human history.
Choose the periods
Choose any three periods from recorded human history, anywhere in the world. Put them in chronological order and keep adjacent choices at least 100 years apart. For each, name a specific year and place; if an exact year is impossible, give the tightest defensible date range and explain it in the label.
Choose periods you can depict accurately. You are judged on the drawing as well as the interface.
Requirements
- One body, one rig. Build one inline SVG body with fixed proportions and named attachment points; armour, clothing, and weapons attach to it. Arms may move to hold equipment, but the torso, head, and legs keep their size and anchors. Do not cross-fade three unrelated figures.
- Smooth and repeatable. Moving the slider must not make the figure jump, rescale, or drift. Returning to a period must recreate the same result exactly. No
Math.random, clocks, or accumulated state. - Accurate labels. Under the figure, show the date, place, equipment name, materials, and weapon. At an exact stop it describes that period; between stops it says which periods the drawing is between. The label must match the drawing.
- Date the weapon too. It must belong to the chosen period and place.
- Give every period equal care. The last stop is not allowed to become a simplified placeholder.
House rules
- One HTML file. Keep CSS, JavaScript, and SVG inline.
- No libraries, CDN assets, network access, canvas, raster images, or font glyphs for the figure. Do not use
localStorage,sessionStorage, cookies, orindexedDB. - It must work when opened as a local file.
- Return exactly these sections:
The timeline
One line per period: date, place, equipment, weapon, and one specific detail a non-specialist might miss.
The rig
One paragraph explaining the attachment points, layer order, and interpolation between periods.
The file
One fenced html block containing the complete page.
The weakest period
Name the least certain historical choice and any accuracy compromise you made for legibility.
Review
I will move the slider slowly in both directions, watch the feet and shoulders for drift, compare labels to drawings, inspect the SVG structure, and go straight to the final period before judging the rest.
assistant
The timeline
- AD 105 · Carnuntum, Pannonia (Danube frontier; modern Petronell, Austria) · Roman legionary — lorica segmentata (Corbridge type) over a wool tunic, Imperial Gallic helmet, balteus with apron, caligae; pilum in hand, Pompeii-type gladius sheathed, scutum grounded at his left. Detail: the sword hangs on the right hip from a baldric over the left shoulder — legionaries drew right-handed past the shield arm, so the sword was not on the left as in later European convention.
- June 1575 · Nagashino, Mikawa Province, Japan (Tenshō 3) · Sengoku samurai — tōsei gusoku: riveted okegawa nimai-dō with kusazuri, sode, shino-gote, haidate, shino-suneate, suji-bachi kabuto with shikoro and crescent maedate, menpō; mochi-yari (straight su-yari) in hand, uchigatana through the obi. Detail: the sword is thrust through the sash edge-up, and the horizontal dots on the cuirass are the exposed rivet heads of the “bucket-side” dō, a Sengoku fashion that replaced the older fully-laced lamellar look.
- 1 July 1916 · The Somme, Picardy, France · British infantryman, BEF — 1902-pattern khaki Service Dress, 1908-pattern web equipment, Brodie Mk I steel helmet, puttees, B5 ammunition boots; Rifle, Short, Magazine Lee-Enfield Mk III with Pattern 1907 sword bayonet fixed. Detail: the two cartridge carriers are five pouches each (three over two, 75 rounds a side), and the bayonet scabbard on his left hip is empty because the bayonet is on the rifle.
The rig
The body is one SVG skeleton in a 560×860 viewBox: head ellipse centred at (260,110), shoulder pivots at (212,182) and (308,182), chest/waist/hip anchors on the centre line, hip pivots at (236,352)/(284,352), knees at y=490, soles on a ground line at y=665, all listed in an invisible #anchors group and mirrored as constants in the script. Each arm is a nested group (upper rotates about the shoulder, fore rotates about the elbow at local (0,110), hand centred at local (0,112)), and every sleeve, kote splint and tunic cuff lives inside those groups so it turns with the limb. Layers are drawn back to front: neck-guards/shikoro behind the head → legs and footwear → torso base with tunics, dō and kusazuri → the held-equipment layer (pilum, scabbard, scutum, yari, saya, rifle) → the two arms → over-arm armour (segmentata shoulder guards, belt, baldric, watagami, sode, tsuka, webbing) → head → helmets. Held items are positioned by JavaScript from the hand anchors that the pose maths produces (translate(hand − designHand)), so they are attached, not free-floating. The slider gives a continuous t∈[0,2]; arm angles are linearly interpolated between the two neighbouring stops, and each period’s equipment groups (.p0 .p1 .p2) receive opacities 1−|t−k| clamped to [0,1], so at an integer stop exactly one period is fully opaque and the other two are hidden. Nothing is scaled, translated or randomised: the same t always yields the same frame.
The file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Armoury — One Figure, Three Periods</title>
<style>
:root{--bg:#1b1a18;--panel:#26241f;--ink:#e9e2d3;--muted:#a79f8c;--accent:#c9a24a}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 Georgia,"Times New Roman",serif;display:flex;flex-direction:column;align-items:center;min-height:100vh}
header{padding:18px 20px 4px;text-align:center}
header h1{margin:0;font-size:20px;letter-spacing:.06em;font-weight:normal;text-transform:uppercase}
header p{margin:4px 0 0;color:var(--muted);font-size:13px}
main{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:flex-start;padding:10px 20px 30px;width:100%;max-width:1100px}
.stage{flex:0 1 460px;background:radial-gradient(ellipse at 50% 35%,#3a3731 0%,#1f1e1b 70%);border:1px solid #3a372f;border-radius:8px;padding:8px}
svg#fig{width:100%;height:auto;display:block;max-height:82vh}
.panel{flex:1 1 320px;max-width:520px;background:var(--panel);border:1px solid #3a372f;border-radius:8px;padding:18px 20px}
.panel h2{margin:0 0 2px;font-size:22px;font-weight:normal;color:var(--accent)}
.panel .sub{margin:0 0 12px;color:var(--muted);font-size:13px}
dl{display:grid;grid-template-columns:100px 1fr;gap:6px 12px;margin:0 0 16px}
dt{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.08em;padding-top:3px}
dd{margin:0}
.slider{margin-top:6px}
input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:2px}
.ticks span{width:33%}
.ticks span:nth-child(2){text-align:center}
.ticks span:nth-child(3){text-align:right}
.note{font-size:12px;color:var(--muted);margin-top:10px}
.between{color:#d6c48a}
</style>
</head>
<body>
<header>
<h1>One Body, Three Armouries</h1>
<p>The same figure re-equipped across 1,800 years. Move the slider; the mannequin does not change, only what it wears and carries.</p>
</header>
<main>
<div class="stage">
<svg id="fig" viewBox="0 0 560 860" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="figTitle">
<title id="figTitle">Standing figure re-equipped by period</title>
<defs>
<linearGradient id="iron" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#c2c7cc"/><stop offset=".5" stop-color="#8d9299"/><stop offset="1" stop-color="#5c6168"/>
</linearGradient>
<linearGradient id="lac" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#3b3936"/><stop offset=".45" stop-color="#181716"/><stop offset="1" stop-color="#090909"/>
</linearGradient>
<linearGradient id="wood" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#9a6a37"/><stop offset="1" stop-color="#5a3816"/>
</linearGradient>
<linearGradient id="shieldShade" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#000" stop-opacity=".45"/><stop offset=".25" stop-color="#000" stop-opacity="0"/>
<stop offset=".75" stop-color="#000" stop-opacity="0"/><stop offset="1" stop-color="#000" stop-opacity=".45"/>
</linearGradient>
<!-- Samurai kusazuri panel: 5 lames, top at y=0, centred on x=0 -->
<g id="kusa">
<path d="M-17 0H17L18 19H-18Z" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="-14" y="3" width="28" height="5" fill="#24447e"/>
<path d="M-18 19H18L19 38H-19Z" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="-15" y="22" width="30" height="5" fill="#24447e"/>
<path d="M-19 38H19L20 57H-20Z" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="-16" y="41" width="32" height="5" fill="#24447e"/>
<path d="M-20 57H20L21 76H-21Z" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="-17" y="60" width="34" height="5" fill="#24447e"/>
<path d="M-21 76H21L22 95H-22Z" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="-18" y="79" width="36" height="5" fill="#24447e"/>
<path d="M-22 95H22" stroke="#c9a24a" stroke-width="1.5"/>
</g>
<!-- Samurai sode: 7 lames -->
<g id="sode">
<rect x="-22" y="0" width="44" height="13" fill="url(#lac)" stroke="#c9a24a" stroke-width="1"/><rect x="-18" y="3" width="36" height="4" fill="#24447e"/>
<rect x="-22" y="13" width="44" height="13" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="-18" y="16" width="36" height="4" fill="#24447e"/>
<rect x="-22" y="26" width="44" height="13" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="-18" y="29" width="36" height="4" fill="#24447e"/>
<rect x="-22" y="39" width="44" height="13" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="-18" y="42" width="36" height="4" fill="#24447e"/>
<rect x="-22" y="52" width="44" height="13" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="-18" y="55" width="36" height="4" fill="#24447e"/>
<rect x="-22" y="65" width="44" height="13" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="-18" y="68" width="36" height="4" fill="#24447e"/>
<rect x="-22" y="78" width="44" height="13" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="-18" y="81" width="36" height="4" fill="#24447e"/>
</g>
<!-- P08 cartridge pouch -->
<g id="pouch">
<rect x="0" y="0" width="15" height="28" rx="2" fill="#8c8460" stroke="#5a543c" stroke-width="1"/>
<rect x="0" y="0" width="15" height="10" rx="2" fill="#7b744f" stroke="#5a543c" stroke-width="1"/>
<circle cx="7.5" cy="14" r="1.5" fill="#3a3a3a"/>
</g>
<!-- Roman caliga: sandal-boot over the base foot -->
<g id="caliga">
<path d="M204 666H258L256 659H206Z" fill="#3e2a16"/>
<path d="M214 646L246 660M248 646L216 660M212 636H250M231 622V660M218 628Q231 620 244 628M222 616Q231 610 240 616" stroke="#5c3d22" stroke-width="3" fill="none" stroke-linecap="round"/>
</g>
<!-- Samurai tabi + waraji -->
<g id="waraji">
<path d="M206 664L208 648Q231 640 254 648L256 664Z" fill="#2b2622"/>
<rect x="203" y="659" width="56" height="7" rx="3" fill="#c9a96a" stroke="#8a7040" stroke-width=".8"/>
<path d="M216 661L231 646L246 661M231 646V638" stroke="#c9a96a" stroke-width="2.5" fill="none" stroke-linecap="round"/>
</g>
<!-- British boot -->
<g id="boot">
<rect x="217" y="628" width="34" height="20" fill="#3a2a1e"/>
<path d="M205 666L209 642Q235 633 258 642L262 666Z" fill="#3a2a1e" stroke="#1c120a" stroke-width="1"/>
<path d="M214 650Q236 644 258 650" stroke="#1c120a" stroke-width="1" fill="none"/>
</g>
</defs>
<g transform="translate(0,100)">
<!-- floor -->
<line x1="60" y1="665" x2="500" y2="665" stroke="#3d3a33" stroke-width="2"/>
<ellipse cx="260" cy="666" rx="150" ry="7" fill="#000" opacity=".35"/>
<!-- named attachment points (invisible; read by the script) -->
<g id="anchors" opacity="0" pointer-events="none">
<circle id="a-head" cx="260" cy="110" r="3"/><circle id="a-neck" cx="260" cy="160" r="3"/>
<circle id="a-shoulderR" cx="212" cy="182" r="3"/><circle id="a-shoulderL" cx="308" cy="182" r="3"/>
<circle id="a-chest" cx="260" cy="230" r="3"/><circle id="a-waist" cx="260" cy="338" r="3"/>
<circle id="a-hipR" cx="236" cy="352" r="3"/><circle id="a-hipL" cx="284" cy="352" r="3"/>
<circle id="a-kneeR" cx="236" cy="490" r="3"/><circle id="a-kneeL" cx="284" cy="490" r="3"/>
<circle id="a-footR" cx="231" cy="665" r="3"/><circle id="a-footL" cx="289" cy="665" r="3"/>
<circle id="a-handR" cx="173.5" cy="400.6" r="3"/><circle id="a-handL" cx="389.7" cy="348.2" r="3"/>
</g>
<!-- LAYER 1: behind the head -->
<g id="L-back">
<g class="p0"><!-- Imperial Gallic neck guard -->
<path d="M212 112H308L318 140Q260 156 202 140Z" fill="url(#iron)" stroke="#4c5157" stroke-width="1.2"/>
<path d="M204 139Q260 152 316 139" stroke="#c9a24a" stroke-width="1.5" fill="none"/>
</g>
<g class="p1"><!-- shikoro: four lames -->
<rect x="204" y="106" width="112" height="16" rx="6" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="212" y="109" width="96" height="4" fill="#24447e"/>
<rect x="200" y="119" width="120" height="16" rx="7" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="208" y="122" width="104" height="4" fill="#24447e"/>
<rect x="196" y="132" width="128" height="16" rx="8" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="204" y="135" width="112" height="4" fill="#24447e"/>
<rect x="192" y="145" width="136" height="16" rx="9" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="200" y="148" width="120" height="4" fill="#24447e"/>
<path d="M192 161H328" stroke="#c9a24a" stroke-width="1.5"/>
</g>
</g>
<!-- LAYER 2: legs -->
<g id="L-legs">
<g fill="#dfb08a" stroke="#a9754f" stroke-width="1.2">
<rect x="216" y="345" width="40" height="150" rx="14"/><rect x="264" y="345" width="40" height="150" rx="14"/>
<rect x="220" y="484" width="32" height="162" rx="12"/><rect x="268" y="484" width="32" height="162" rx="12"/>
<path d="M206 665L208 650Q231 640 256 650L258 665Z"/><path d="M262 665L264 650Q289 640 314 650L316 665Z"/>
</g>
<!-- Roman: bare legs, caligae -->
<g class="p0">
<use href="#caliga"/><use href="#caliga" transform="matrix(-1 0 0 1 520 0)"/>
</g>
<!-- Samurai: haidate, suneate, tabi/waraji -->
<g class="p1">
<path d="M214 425H258L260 508H210Z" fill="#22304f" stroke="#101a30" stroke-width="1"/>
<path d="M262 425H306L310 508H260Z" fill="#22304f" stroke="#101a30" stroke-width="1"/>
<g fill="url(#lac)" stroke="#000" stroke-width=".6">
<rect x="218" y="432" width="10" height="8" rx="1"/><rect x="230" y="432" width="10" height="8" rx="1"/><rect x="242" y="432" width="10" height="8" rx="1"/>
<rect x="217" y="444" width="10" height="8" rx="1"/><rect x="229" y="444" width="10" height="8" rx="1"/><rect x="241" y="444" width="10" height="8" rx="1"/><rect x="253" y="444" width="5" height="8" rx="1"/>
<rect x="216" y="456" width="10" height="8" rx="1"/><rect x="228" y="456" width="10" height="8" rx="1"/><rect x="240" y="456" width="10" height="8" rx="1"/><rect x="252" y="456" width="6" height="8" rx="1"/>
<rect x="215" y="468" width="10" height="8" rx="1"/><rect x="227" y="468" width="10" height="8" rx="1"/><rect x="239" y="468" width="10" height="8" rx="1"/><rect x="251" y="468" width="7" height="8" rx="1"/>
<rect x="214" y="480" width="10" height="8" rx="1"/><rect x="226" y="480" width="10" height="8" rx="1"/><rect x="238" y="480" width="10" height="8" rx="1"/><rect x="250" y="480" width="8" height="8" rx="1"/>
<rect x="213" y="492" width="10" height="8" rx="1"/><rect x="225" y="492" width="10" height="8" rx="1"/><rect x="237" y="492" width="10" height="8" rx="1"/><rect x="249" y="492" width="9" height="8" rx="1"/>
<rect x="268" y="432" width="10" height="8" rx="1"/><rect x="280" y="432" width="10" height="8" rx="1"/><rect x="292" y="432" width="10" height="8" rx="1"/>
<rect x="262" y="444" width="5" height="8" rx="1"/><rect x="269" y="444" width="10" height="8" rx="1"/><rect x="281" y="444" width="10" height="8" rx="1"/><rect x="293" y="444" width="10" height="8" rx="1"/>
<rect x="262" y="456" width="6" height="8" rx="1"/><rect x="270" y="456" width="10" height="8" rx="1"/><rect x="282" y="456" width="10" height="8" rx="1"/><rect x="294" y="456" width="10" height="8" rx="1"/>
<rect x="262" y="468" width="7" height="8" rx="1"/><rect x="271" y="468" width="10" height="8" rx="1"/><rect x="283" y="468" width="10" height="8" rx="1"/><rect x="295" y="468" width="10" height="8" rx="1"/>
<rect x="262" y="480" width="8" height="8" rx="1"/><rect x="272" y="480" width="10" height="8" rx="1"/><rect x="284" y="480" width="10" height="8" rx="1"/><rect x="296" y="480" width="10" height="8" rx="1"/>
<rect x="262" y="492" width="9" height="8" rx="1"/><rect x="273" y="492" width="10" height="8" rx="1"/><rect x="285" y="492" width="10" height="8" rx="1"/><rect x="297" y="492" width="10" height="8" rx="1"/>
</g>
<!-- suneate -->
<rect x="220" y="505" width="32" height="138" rx="6" fill="#22304f" stroke="#101a30" stroke-width="1"/>
<path d="M226 514V636M236 512V638M246 514V636" stroke="url(#iron)" stroke-width="4.5" stroke-linecap="round"/>
<rect x="222" y="500" width="28" height="14" rx="4" fill="url(#iron)" stroke="#4c5157" stroke-width=".8"/>
<rect x="268" y="505" width="32" height="138" rx="6" fill="#22304f" stroke="#101a30" stroke-width="1"/>
<path d="M274 514V636M284 512V638M294 514V636" stroke="url(#iron)" stroke-width="4.5" stroke-linecap="round"/>
<rect x="270" y="500" width="28" height="14" rx="4" fill="url(#iron)" stroke="#4c5157" stroke-width=".8"/>
<use href="#waraji"/><use href="#waraji" transform="matrix(-1 0 0 1 520 0)"/>
</g>
<!-- British: trousers, puttees, boots -->
<g class="p2">
<rect x="213" y="348" width="46" height="158" rx="10" fill="#6e6742" stroke="#4d4830" stroke-width="1"/>
<rect x="261" y="348" width="46" height="158" rx="10" fill="#6e6742" stroke="#4d4830" stroke-width="1"/>
<use href="#boot"/><use href="#boot" transform="matrix(-1 0 0 1 520 0)"/>
<rect x="218" y="500" width="36" height="140" rx="6" fill="#756e48" stroke="#4d4830" stroke-width="1"/>
<path d="M218 516L254 506M218 534L254 524M218 552L254 542M218 570L254 560M218 588L254 578M218 606L254 596M218 624L254 614" stroke="#57502f" stroke-width="1.3" fill="none"/>
<rect x="266" y="500" width="36" height="140" rx="6" fill="#756e48" stroke="#4d4830" stroke-width="1"/>
<path d="M266 506L302 516M266 524L302 534M266 542L302 552M266 560L302 570M266 578L302 588M266 596L302 606M266 614L302 624" stroke="#57502f" stroke-width="1.3" fill="none"/>
</g>
</g>
<!-- LAYER 3: torso base + garments that hang from it -->
<g id="L-torso">
<rect x="246" y="138" width="28" height="36" rx="6" fill="#dfb08a" stroke="#a9754f" stroke-width="1.2"/>
<path d="M206 172H314Q320 176 318 192L313 356H207L202 192Q200 176 206 172Z" fill="#dfb08a" stroke="#a9754f" stroke-width="1.2"/>
<!-- Roman tunic body + skirt, focale -->
<g class="p0">
<path d="M206 172H314L318 300L324 470H196L202 300Z" fill="#a12e23" stroke="#6b1a12" stroke-width="1"/>
<path d="M228 340L224 468M292 340L296 468M260 350V468" stroke="#7a1f16" stroke-width="1" fill="none"/>
<path d="M236 150Q260 170 284 150L294 168Q260 186 226 168Z" fill="#c9a97a" stroke="#8a6d45" stroke-width="1"/>
</g>
<!-- Samurai dō + kusazuri -->
<g class="p1">
<path d="M208 178L240 172V190H280V172L312 178L316 338H204Z" fill="url(#lac)" stroke="#000" stroke-width="1"/>
<path d="M208 200H312M208 220H312M208 240H312M208 260H312M208 280H312M208 300H312M208 320H312" stroke="#000" stroke-width="1"/>
<path d="M214 200H310M214 220H310M214 240H310M214 260H310M214 280H310M214 300H310M214 320H310" stroke="#a8adb3" stroke-width="3" stroke-dasharray="0.1 14" stroke-linecap="round"/>
<rect x="206" y="176" width="108" height="16" rx="3" fill="#191817" stroke="#c9a24a" stroke-width="1"/>
<path d="M214 178V190M226 178V190M238 178V190M282 178V190M294 178V190M306 178V190" stroke="#24447e" stroke-width="4"/>
<use href="#kusa" transform="translate(194,338)"/>
<use href="#kusa" transform="translate(326,338)"/>
<use href="#kusa" transform="translate(224,338)"/>
<use href="#kusa" transform="translate(296,338)"/>
<use href="#kusa" transform="translate(260,338)"/>
</g>
<!-- British service dress tunic -->
<g class="p2">
<path d="M204 170H316L318 200L323 432H197L202 200Z" fill="#7a7248" stroke="#4d4830" stroke-width="1"/>
<path d="M238 168Q260 158 282 168L280 184Q260 178 240 184Z" fill="#6e6742" stroke="#4d4830" stroke-width="1"/>
<path d="M260 184V432" stroke="#55502f" stroke-width="1"/>
<g fill="#b08a3c" stroke="#6b5220" stroke-width=".6">
<circle cx="260" cy="200" r="3"/><circle cx="260" cy="250" r="3"/><circle cx="260" cy="300" r="3"/><circle cx="260" cy="365" r="3"/><circle cx="260" cy="412" r="3"/>
</g>
<!-- breast pockets -->
<rect x="214" y="200" width="36" height="38" fill="#7a7248" stroke="#4d4830" stroke-width="1"/><path d="M232 210V238" stroke="#55502f" stroke-width="1"/>
<path d="M214 200H250L248 210H216Z" fill="#6e6742" stroke="#4d4830" stroke-width="1"/><circle cx="232" cy="206" r="2" fill="#b08a3c"/>
<rect x="270" y="200" width="36" height="38" fill="#7a7248" stroke="#4d4830" stroke-width="1"/><path d="M288 210V238" stroke="#55502f" stroke-width="1"/>
<path d="M270 200H306L304 210H272Z" fill="#6e6742" stroke="#4d4830" stroke-width="1"/><circle cx="288" cy="206" r="2" fill="#b08a3c"/>
<!-- skirt pockets -->
<rect x="208" y="356" width="42" height="56" fill="#7a7248" stroke="#4d4830" stroke-width="1"/>
<path d="M208 356H250L248 366H210Z" fill="#6e6742" stroke="#4d4830" stroke-width="1"/><circle cx="229" cy="362" r="2" fill="#b08a3c"/>
<rect x="270" y="356" width="42" height="56" fill="#7a7248" stroke="#4d4830" stroke-width="1"/>
<path d="M270 356H312L310 366H272Z" fill="#6e6742" stroke="#4d4830" stroke-width="1"/><circle cx="291" cy="362" r="2" fill="#b08a3c"/>
<!-- shoulder straps -->
<rect x="214" y="170" width="30" height="8" rx="3" fill="#6e6742" stroke="#4d4830" stroke-width="1"/><circle cx="240" cy="174" r="2" fill="#b08a3c"/>
<rect x="276" y="170" width="30" height="8" rx="3" fill="#6e6742" stroke="#4d4830" stroke-width="1"/><circle cx="280" cy="174" r="2" fill="#b08a3c"/>
</g>
</g>
<!-- LAYER 4: held / hung equipment (behind the arms so hands read as gripping) -->
<g id="L-held">
<g class="p0">
<!-- scutum grounded at his left, hand rests on its rim -->
<g id="w-scutum">
<rect x="330" y="338" width="190" height="327" rx="4" fill="#8f2a20" stroke="#c9a24a" stroke-width="4"/>
<path d="M338 350Q358 390 380 405M352 348Q368 384 388 398M366 346Q380 380 396 392" stroke="#e0b845" stroke-width="7" fill="none" stroke-linecap="round"/>
<path d="M512 350Q492 390 470 405M498 348Q482 384 462 398M484 346Q470 380 454 392" stroke="#e0b845" stroke-width="7" fill="none" stroke-linecap="round"/>
<path d="M338 655Q358 615 380 598M352 657Q368 621 388 607M366 659Q380 625 396 613" stroke="#e0b845" stroke-width="7" fill="none" stroke-linecap="round"/>
<path d="M512 655Q492 615 470 598M498 657Q482 621 462 607M484 659Q470 625 454 613" stroke="#e0b845" stroke-width="7" fill="none" stroke-linecap="round"/>
<path d="M425 358L415 388L433 386L419 420M425 645L415 615L433 617L419 583" stroke="#e0b845" stroke-width="5" fill="none" stroke-linejoin="round"/>
<rect x="398" y="474" width="54" height="54" fill="url(#iron)" stroke="#4c5157" stroke-width="1.2"/>
<circle cx="425" cy="501" r="20" fill="url(#iron)" stroke="#4c5157" stroke-width="1.2"/>
<circle cx="425" cy="501" r="7" fill="#5c6168"/>
<rect x="330" y="338" width="190" height="327" rx="4" fill="url(#shieldShade)"/>
</g>
<!-- pilum, butt on the ground -->
<g id="w-pilum">
<rect x="170" y="60" width="7" height="605" fill="url(#wood)" stroke="#3d2610" stroke-width=".6"/>
<path d="M166 58H181L179 78H168Z" fill="url(#iron)" stroke="#4c5157" stroke-width=".8"/>
<rect x="172" y="-46" width="3" height="106" fill="#8d9299"/>
<path d="M173.5 -56L177 -42L173.5 -34L170 -42Z" fill="#8d9299"/>
<rect x="169" y="648" width="9" height="17" fill="url(#iron)"/>
</g>
<!-- gladius (Pompeii type) in scabbard on right hip, from a baldric -->
<g id="w-gladius">
<circle cx="198" cy="270" r="7" fill="#e8dcc4" stroke="#8a7a5a" stroke-width=".8"/>
<rect x="193" y="276" width="10" height="26" rx="2" fill="#c9b88f" stroke="#8a7a5a" stroke-width=".8"/>
<path d="M193 283H203M193 290H203M193 297H203" stroke="#8a7a5a" stroke-width=".8"/>
<ellipse cx="198" cy="304" rx="11" ry="4" fill="#e8dcc4" stroke="#8a7a5a" stroke-width=".8"/>
<rect x="191" y="306" width="14" height="150" rx="3" fill="#6b3a1c" stroke="#3a1e0c" stroke-width="1"/>
<rect x="190" y="306" width="16" height="9" fill="#c9a24a"/>
<rect x="190" y="340" width="16" height="5" fill="#c9a24a"/><rect x="190" y="378" width="16" height="5" fill="#c9a24a"/>
<path d="M191 448H205L198 466Z" fill="#c9a24a"/>
</g>
</g>
<g class="p1">
<!-- mochi-yari -->
<g id="w-yari">
<rect x="170" y="62" width="8" height="603" fill="#241a12" stroke="#000" stroke-width=".6"/>
<path d="M172 70V650" stroke="#5a4634" stroke-width="1"/>
<path d="M174 -72L180 -20V62H168V-20Z" fill="url(#iron)" stroke="#4c5157" stroke-width=".8"/>
<path d="M174 -60V60" stroke="#dfe3e6" stroke-width="1"/>
<rect x="166" y="60" width="16" height="14" fill="#c9a24a" stroke="#6b5220" stroke-width=".8"/>
<rect x="167" y="82" width="14" height="4" fill="#c9a24a"/><rect x="167" y="92" width="14" height="4" fill="#c9a24a"/>
<path d="M167 650H181V665H167Z" fill="url(#iron)"/>
</g>
<!-- saya of the uchigatana, behind the left hip -->
<g id="w-saya">
<path d="M305 343L346 458" stroke="#141210" stroke-width="11" stroke-linecap="round"/>
<path d="M305 343L346 458" stroke="#3a3835" stroke-width="1.2"/>
<path d="M308 356Q322 366 318 384" stroke="#3c6b3a" stroke-width="2.5" fill="none"/>
<circle cx="346" cy="458" r="5" fill="#8d9299"/>
</g>
</g>
<g class="p2">
<!-- SMLE Mk III with P1907 bayonet fixed, butt on the ground -->
<g id="w-smle">
<path d="M165 600Q150 490 165 385" stroke="#7a5a3a" stroke-width="3" fill="none"/>
<path d="M163 665H183L182 600Q180 560 178 545H168Q166 560 164 600Z" fill="url(#wood)" stroke="#3d2610" stroke-width=".8"/>
<rect x="162" y="658" width="22" height="8" fill="#b08a3c" stroke="#6b5220" stroke-width=".6"/>
<circle cx="173" cy="615" r="3" fill="#b08a3c"/>
<rect x="167" y="528" width="12" height="20" fill="url(#wood)"/>
<path d="M167 546Q158 546 158 534L167 532" stroke="#3e4146" stroke-width="2" fill="none"/>
<rect x="152" y="500" width="14" height="27" rx="1" fill="#3e4146" stroke="#1e2124" stroke-width=".8"/>
<rect x="166" y="486" width="14" height="44" fill="#3e4146" stroke="#1e2124" stroke-width=".8"/>
<path d="M180 500Q193 500 193 508" stroke="#3e4146" stroke-width="4" fill="none"/><circle cx="193" cy="509" r="4" fill="#3e4146"/>
<rect x="166" y="228" width="14" height="260" fill="url(#wood)" stroke="#3d2610" stroke-width=".8"/>
<path d="M173 236V480" stroke="#3d2610" stroke-width=".6"/>
<rect x="163" y="468" width="20" height="7" fill="#3e4146"/>
<rect x="164" y="380" width="18" height="6" fill="#3e4146"/>
<rect x="164" y="204" width="18" height="28" fill="#3e4146" stroke="#1e2124" stroke-width=".8"/>
<rect x="170" y="194" width="6" height="12" fill="#3e4146"/>
<rect x="176" y="190" width="10" height="36" rx="2" fill="#4a3220" stroke="#2a1a0c" stroke-width=".8"/>
<rect x="167" y="187" width="21" height="4" fill="#3e4146"/>
<path d="M178 188H186L185 70L182 44L179 70Z" fill="url(#iron)" stroke="#4c5157" stroke-width=".8"/>
<path d="M182 176V80" stroke="#dfe3e6" stroke-width="1"/>
</g>
</g>
</g>
<!-- LAYER 5: arms (right arm = viewer's left) -->
<g id="armR" transform="rotate(10 212 182)">
<g transform="translate(212,182)">
<rect x="-13" y="-6" width="26" height="120" rx="13" fill="#dfb08a" stroke="#a9754f" stroke-width="1.2"/>
<rect class="p0" x="-15" y="-7" width="30" height="60" rx="8" fill="#a12e23" stroke="#6b1a12" stroke-width="1"/>
<rect class="p1" x="-14" y="-7" width="28" height="118" rx="10" fill="#22304f" stroke="#101a30" stroke-width="1"/>
<rect class="p2" x="-14" y="-7" width="28" height="118" rx="10" fill="#7a7248" stroke="#4d4830" stroke-width="1"/>
<g id="foreR" transform="rotate(0 0 110)">
<g transform="translate(0,110)">
<rect x="-11" y="-5" width="22" height="108" rx="11" fill="#dfb08a" stroke="#a9754f" stroke-width="1.2"/>
<g class="p1">
<rect x="-12" y="-4" width="24" height="104" rx="9" fill="#22304f" stroke="#101a30" stroke-width="1"/>
<path d="M-7 12V90M0 10V92M7 12V90" stroke="url(#iron)" stroke-width="3.5" stroke-linecap="round"/>
<circle cx="0" cy="0" r="9" fill="url(#iron)" stroke="#4c5157" stroke-width=".8"/>
</g>
<g class="p2">
<rect x="-12" y="-4" width="24" height="102" rx="8" fill="#7a7248" stroke="#4d4830" stroke-width="1"/>
<path d="M-12 88H12" stroke="#55502f" stroke-width="1"/>
</g>
<ellipse cx="0" cy="112" rx="11" ry="15" fill="#dfb08a" stroke="#a9754f" stroke-width="1.2"/>
<path class="p1" d="M-8 100H8V115H-8Z" fill="url(#iron)" stroke="#4c5157" stroke-width=".8"/>
</g>
</g>
</g>
</g>
<g id="armL" transform="rotate(-60 308 182)">
<g transform="translate(308,182)">
<rect x="-13" y="-6" width="26" height="120" rx="13" fill="#dfb08a" stroke="#a9754f" stroke-width="1.2"/>
<rect class="p0" x="-15" y="-7" width="30" height="60" rx="8" fill="#a12e23" stroke="#6b1a12" stroke-width="1"/>
<rect class="p1" x="-14" y="-7" width="28" height="118" rx="10" fill="#22304f" stroke="#101a30" stroke-width="1"/>
<rect class="p2" x="-14" y="-7" width="28" height="118" rx="10" fill="#7a7248" stroke="#4d4830" stroke-width="1"/>
<g id="foreL" transform="rotate(67 0 110)">
<g transform="translate(0,110)">
<rect x="-11" y="-5" width="22" height="108" rx="11" fill="#dfb08a" stroke="#a9754f" stroke-width="1.2"/>
<g class="p1">
<rect x="-12" y="-4" width="24" height="104" rx="9" fill="#22304f" stroke="#101a30" stroke-width="1"/>
<path d="M-7 12V90M0 10V92M7 12V90" stroke="url(#iron)" stroke-width="3.5" stroke-linecap="round"/>
<circle cx="0" cy="0" r="9" fill="url(#iron)" stroke="#4c5157" stroke-width=".8"/>
</g>
<g class="p2">
<rect x="-12" y="-4" width="24" height="102" rx="8" fill="#7a7248" stroke="#4d4830" stroke-width="1"/>
<path d="M-12 88H12" stroke="#55502f" stroke-width="1"/>
</g>
<ellipse cx="0" cy="112" rx="11" ry="15" fill="#dfb08a" stroke="#a9754f" stroke-width="1.2"/>
<path class="p1" d="M-8 100H8V115H-8Z" fill="url(#iron)" stroke="#4c5157" stroke-width=".8"/>
</g>
</g>
</g>
</g>
<!-- LAYER 6: armour worn over the shoulders / waist -->
<g id="L-armour">
<g class="p0">
<!-- lorica segmentata, Corbridge type -->
<g id="shR">
<path d="M246 166Q212 166 190 196" stroke="#4c5157" stroke-width="15" fill="none" stroke-linecap="round"/>
<path d="M246 166Q212 166 190 196" stroke="url(#iron)" stroke-width="11" fill="none" stroke-linecap="round"/>
<path d="M246 180Q216 180 196 208" stroke="#4c5157" stroke-width="15" fill="none" stroke-linecap="round"/>
<path d="M246 180Q216 180 196 208" stroke="url(#iron)" stroke-width="11" fill="none" stroke-linecap="round"/>
<path d="M246 194Q220 194 202 220" stroke="#4c5157" stroke-width="15" fill="none" stroke-linecap="round"/>
<path d="M246 194Q220 194 202 220" stroke="url(#iron)" stroke-width="11" fill="none" stroke-linecap="round"/>
<path d="M246 208Q224 208 208 232" stroke="#4c5157" stroke-width="15" fill="none" stroke-linecap="round"/>
<path d="M246 208Q224 208 208 232" stroke="url(#iron)" stroke-width="11" fill="none" stroke-linecap="round"/>
<path d="M256 168V234H222Q224 200 246 186Z" fill="url(#iron)" stroke="#4c5157" stroke-width="1.2"/>
<rect x="232" y="172" width="8" height="6" fill="#c9a24a"/><rect x="222" y="188" width="8" height="6" fill="#c9a24a"/>
<rect x="248" y="196" width="6" height="10" fill="#c9a24a"/><rect x="248" y="216" width="6" height="10" fill="#c9a24a"/>
</g>
<use href="#shR" transform="matrix(-1 0 0 1 520 0)"/>
<!-- girth hoops -->
<g fill="url(#iron)" stroke="#4c5157" stroke-width="1.2">
<rect x="205" y="234" width="110" height="14.5"/><rect x="205" y="248.5" width="110" height="14.5"/><rect x="205" y="263" width="110" height="14.5"/>
<rect x="205" y="277.5" width="110" height="14.5"/><rect x="205" y="292" width="110" height="14.5"/><rect x="205" y="306.5" width="110" height="14.5"/><rect x="205" y="321" width="110" height="14.5"/>
</g>
<path d="M260 234V336" stroke="#4c5157" stroke-width="1"/>
<g fill="#c9a24a">
<rect x="252" y="237" width="4" height="8"/><rect x="264" y="237" width="4" height="8"/>
<rect x="252" y="252" width="4" height="8"/><rect x="264" y="252" width="4" height="8"/>
<rect x="252" y="266" width="4" height="8"/><rect x="264" y="266" width="4" height="8"/>
<rect x="252" y="281" width="4" height="8"/><rect x="264" y="281" width="4" height="8"/>
<rect x="252" y="295" width="4" height="8"/><rect x="264" y="295" width="4" height="8"/>
<rect x="252" y="310" width="4" height="8"/><rect x="264" y="310" width="4" height="8"/>
<rect x="252" y="324" width="4" height="8"/><rect x="264" y="324" width="4" height="8"/>
</g>
<!-- baldric over left shoulder to right hip -->
<path d="M298 170L204 320" stroke="#5a3a20" stroke-width="8"/>
<path d="M298 170L204 320" stroke="#7a5230" stroke-width="2"/>
<!-- balteus with plates and apron -->
<rect x="203" y="334" width="114" height="12" fill="#5a3a20" stroke="#2e1c0c" stroke-width=".8"/>
<g fill="#d8d6cf" stroke="#8a8880" stroke-width=".6">
<rect x="206" y="335" width="10" height="10"/><rect x="220" y="335" width="10" height="10"/><rect x="234" y="335" width="10" height="10"/><rect x="248" y="335" width="10" height="10"/>
<rect x="262" y="335" width="10" height="10"/><rect x="276" y="335" width="10" height="10"/><rect x="290" y="335" width="10" height="10"/><rect x="304" y="335" width="10" height="10"/>
</g>
<g fill="#5a3a20"><rect x="240" y="346" width="6" height="66"/><rect x="250" y="346" width="6" height="68"/><rect x="264" y="346" width="6" height="68"/><rect x="274" y="346" width="6" height="66"/></g>
<g fill="#c9a24a">
<circle cx="243" cy="356" r="2.8"/><circle cx="243" cy="368" r="2.8"/><circle cx="243" cy="380" r="2.8"/><circle cx="243" cy="392" r="2.8"/><circle cx="243" cy="404" r="2.8"/>
<circle cx="253" cy="356" r="2.8"/><circle cx="253" cy="368" r="2.8"/><circle cx="253" cy="380" r="2.8"/><circle cx="253" cy="392" r="2.8"/><circle cx="253" cy="404" r="2.8"/>
<circle cx="267" cy="356" r="2.8"/><circle cx="267" cy="368" r="2.8"/><circle cx="267" cy="380" r="2.8"/><circle cx="267" cy="392" r="2.8"/><circle cx="267" cy="404" r="2.8"/>
<circle cx="277" cy="356" r="2.8"/><circle cx="277" cy="368" r="2.8"/><circle cx="277" cy="380" r="2.8"/><circle cx="277" cy="392" r="2.8"/><circle cx="277" cy="404" r="2.8"/>
<ellipse cx="243" cy="416" rx="4" ry="6"/><ellipse cx="253" cy="418" rx="4" ry="6"/><ellipse cx="267" cy="418" rx="4" ry="6"/><ellipse cx="277" cy="416" rx="4" ry="6"/>
</g>
</g>
<g class="p1">
<!-- watagami shoulder straps, gyōyō, sode -->
<rect x="216" y="164" width="22" height="26" rx="4" fill="url(#lac)" stroke="#c9a24a" stroke-width="1"/>
<rect x="282" y="164" width="22" height="26" rx="4" fill="url(#lac)" stroke="#c9a24a" stroke-width="1"/>
<path d="M224 190L230 178L236 190" stroke="#24447e" stroke-width="3" fill="none"/>
<path d="M284 190L290 178L296 190" stroke="#24447e" stroke-width="3" fill="none"/>
<use href="#sode" transform="translate(206,172) rotate(-6)"/>
<use href="#sode" transform="translate(314,172) rotate(6)"/>
<ellipse cx="228" cy="200" rx="8" ry="11" fill="url(#lac)" stroke="#c9a24a" stroke-width="1"/>
<ellipse cx="292" cy="200" rx="8" ry="11" fill="url(#lac)" stroke="#c9a24a" stroke-width="1"/>
<!-- uwa-obi and the sword hilt through it -->
<rect x="203" y="328" width="114" height="16" fill="#d8cfb4" stroke="#a89c78" stroke-width=".8"/>
<path d="M209 332Q260 340 311 332" stroke="#b8ad8a" stroke-width="1" fill="none"/>
<path d="M303 340L281 308" stroke="#1f1f1f" stroke-width="10" stroke-linecap="round"/>
<path d="M298 334L292 326M294 328L288 320M290 322L284 314" stroke="#d8d0b8" stroke-width="1.4"/>
<circle cx="281" cy="308" r="4" fill="#3e4146"/>
<circle cx="305" cy="343" r="9" fill="#3b3123" stroke="#c9a24a" stroke-width="1.2"/>
</g>
<g class="p2">
<!-- 1908 pattern web equipment -->
<rect x="228" y="168" width="9" height="80" fill="#8c8460" stroke="#5a543c" stroke-width=".8"/>
<rect x="283" y="168" width="9" height="80" fill="#8c8460" stroke="#5a543c" stroke-width=".8"/>
<rect x="202" y="330" width="116" height="20" fill="#8c8460" stroke="#5a543c" stroke-width="1"/>
<rect x="253" y="332" width="14" height="16" fill="#b08a3c" stroke="#6b5220" stroke-width=".8"/>
<use href="#pouch" transform="translate(206,246)"/><use href="#pouch" transform="translate(223,246)"/><use href="#pouch" transform="translate(240,246)"/>
<use href="#pouch" transform="translate(214,276)"/><use href="#pouch" transform="translate(231,276)"/>
<use href="#pouch" transform="translate(299,246)"/><use href="#pouch" transform="translate(282,246)"/><use href="#pouch" transform="translate(265,246)"/>
<use href="#pouch" transform="translate(291,276)"/><use href="#pouch" transform="translate(274,276)"/>
<!-- bayonet frog, empty P1907 scabbard, entrenching-tool helve, on the left hip -->
<rect x="318" y="346" width="12" height="36" fill="#8c8460" stroke="#5a543c" stroke-width=".8"/>
<path d="M320 378H332L331 470Q326 480 321 470Z" fill="#4a3320" stroke="#2a1a0c" stroke-width=".8"/>
<path d="M321 462H331V470Q326 478 321 470Z" fill="#3e4146"/>
<rect x="333" y="350" width="6" height="120" rx="2" fill="url(#wood)" stroke="#3d2610" stroke-width=".6"/>
<!-- water bottle carrier, right hip -->
<path d="M192 352H212L214 400Q202 412 190 400Z" fill="#8c8460" stroke="#5a543c" stroke-width=".8"/>
<path d="M194 356H210V392H194Z" fill="none" stroke="#5a543c" stroke-width=".6"/>
</g>
</g>
<!-- LAYER 7: head, then helmets -->
<g id="L-head">
<ellipse cx="227" cy="112" rx="5" ry="8" fill="#dfb08a" stroke="#a9754f" stroke-width="1"/>
<ellipse cx="293" cy="112" rx="5" ry="8" fill="#dfb08a" stroke="#a9754f" stroke-width="1"/>
<ellipse cx="260" cy="110" rx="33" ry="38" fill="#dfb08a" stroke="#a9754f" stroke-width="1.2"/>
<path d="M240 100Q248 95 256 100M264 100Q272 95 280 100" stroke="#5a3a20" stroke-width="2" fill="none"/>
<ellipse cx="248" cy="108" rx="3" ry="2.2" fill="#2a1a10"/><ellipse cx="272" cy="108" rx="3" ry="2.2" fill="#2a1a10"/>
<path d="M258 108L255 124H264" stroke="#a9754f" stroke-width="1.2" fill="none"/>
<path d="M250 136Q260 141 270 136" stroke="#8a4a3a" stroke-width="1.8" fill="none"/>
<!-- samurai menpō with yodare-kake -->
<g class="p1">
<rect x="230" y="152" width="60" height="9" rx="3" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="236" y="154" width="48" height="3" fill="#24447e"/>
<rect x="226" y="160" width="68" height="9" rx="3" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="232" y="162" width="56" height="3" fill="#24447e"/>
<rect x="222" y="168" width="76" height="9" rx="3" fill="url(#lac)" stroke="#000" stroke-width=".8"/><rect x="228" y="170" width="64" height="3" fill="#24447e"/>
<path d="M231 118Q231 148 250 156H270Q289 148 289 118Q274 128 260 116Q246 128 231 118Z" fill="#2b2320" stroke="#0a0a0a" stroke-width="1"/>
<path d="M256 118L251 133H269L264 118Z" fill="#1a1512"/>
<path d="M242 137Q260 129 278 137" stroke="#e6e0d0" stroke-width="3" fill="none" stroke-linecap="round"/>
<path d="M250 144Q260 149 270 144" stroke="#8a1a1a" stroke-width="3" fill="none" stroke-linecap="round"/>
</g>
<!-- Imperial Gallic helmet -->
<g class="p0">
<path d="M224 112Q222 62 260 62Q298 62 296 112Z" fill="url(#iron)" stroke="#4c5157" stroke-width="1.2"/>
<path d="M232 96Q246 86 258 96M262 96Q274 86 288 96" stroke="#c9a24a" stroke-width="3" fill="none" stroke-linecap="round"/>
<path d="M220 104H300L302 112H218Z" fill="url(#iron)" stroke="#4c5157" stroke-width="1.2"/>
<circle cx="230" cy="108" r="2.5" fill="#c9a24a"/><circle cx="290" cy="108" r="2.5" fill="#c9a24a"/>
<path d="M222 108H233V122" stroke="#c9a24a" stroke-width="2" fill="none"/><path d="M298 108H287V122" stroke="#c9a24a" stroke-width="2" fill="none"/>
<path d="M226 116H247V136Q249 152 239 158Q227 156 226 144Z" fill="url(#iron)" stroke="#4c5157" stroke-width="1.2"/>
<path d="M228 118V144Q229 152 238 155" stroke="#c9a24a" stroke-width="1.4" fill="none"/>
<path d="M294 116H273V136Q271 152 281 158Q293 156 294 144Z" fill="url(#iron)" stroke="#4c5157" stroke-width="1.2"/>
<path d="M292 118V144Q291 152 282 155" stroke="#c9a24a" stroke-width="1.4" fill="none"/>
<path d="M239 158Q260 164 281 158" stroke="#5a3a20" stroke-width="2" fill="none"/>
</g>
<!-- suji-bachi kabuto -->
<g class="p1">
<path d="M218 112Q218 58 260 58Q302 58 302 112Z" fill="url(#lac)" stroke="#000" stroke-width="1"/>
<path d="M260 62L232 110M260 62L246 110M260 62V112M260 62L274 110M260 62L288 110M257 64L223 106M263 64L297 106" stroke="#6f6f6f" stroke-width="1.2" fill="none"/>
<circle cx="260" cy="61" r="5" fill="none" stroke="#c9a24a" stroke-width="2.5"/>
<path d="M214 108H306Q306 121 260 123Q214 121 214 108Z" fill="#191817" stroke="#c9a24a" stroke-width="1.2"/>
<path d="M215 106Q200 108 198 126Q211 130 221 118Z" fill="url(#lac)" stroke="#c9a24a" stroke-width="1"/><circle cx="208" cy="119" r="3.5" fill="#c9a24a"/>
<path d="M305 106Q320 108 322 126Q309 130 299 118Z" fill="url(#lac)" stroke="#c9a24a" stroke-width="1"/><circle cx="312" cy="119" r="3.5" fill="#c9a24a"/>
<path d="M236 104Q260 74 284 104Q260 90 236 104Z" fill="#d8b24a" stroke="#8a6a1a" stroke-width="1"/>
</g>
<!-- Brodie helmet, Mk I -->
<g class="p2">
<ellipse cx="260" cy="100" rx="58" ry="10" fill="#6b5f3d" stroke="#3d3624" stroke-width="1.2"/>
<path d="M222 100Q222 64 260 64Q298 64 298 100Z" fill="#6b5f3d" stroke="#3d3624" stroke-width="1.2"/>
<path d="M236 74Q248 66 262 66" stroke="#857849" stroke-width="2" fill="none" stroke-linecap="round"/>
<path d="M202 100Q260 113 318 100" stroke="#8d7f52" stroke-width="1.4" fill="none"/>
<path d="M228 106L237 150Q260 159 283 150L292 106" stroke="#4a3320" stroke-width="2.5" fill="none"/>
<rect x="257" y="150" width="6" height="6" fill="#3e4146"/>
</g>
</g>
</g>
</svg>
</div>
<section class="panel" aria-live="polite">
<h2 id="lblTitle">—</h2>
<p class="sub" id="lblSub">—</p>
<dl>
<dt>Date</dt><dd id="lblDate">—</dd>
<dt>Place</dt><dd id="lblPlace">—</dd>
<dt>Equipment</dt><dd id="lblEquip">—</dd>
<dt>Materials</dt><dd id="lblMat">—</dd>
<dt>Weapon</dt><dd id="lblWeap">—</dd>
</dl>
<div class="slider">
<label for="period" style="font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em">Period</label>
<input id="period" type="range" min="0" max="200" step="1" value="0" aria-valuemin="0" aria-valuemax="200" aria-valuenow="0">
<div class="ticks"><span>AD 105 · Carnuntum</span><span>1575 · Nagashino</span><span>1916 · Somme</span></div>
</div>
<p class="note">Same skeleton throughout: head, torso, hips, knees and soles never move; only the arms rotate to hold equipment. Stops are exact at 0, 100 and 200.</p>
</section>
</main>
<script>
(function(){
'use strict';
// ---- rig constants (match the #anchors group) ----
var SHOULDER_R = {x:212, y:182}, SHOULDER_L = {x:308, y:182};
var UPPER = 110, FORE_TO_HAND = 112;
// ---- poses at each stop: upper-arm and forearm angles (degrees) ----
var POSES = [
{ru:10, rf:0, lu:-60, lf:67}, // legionary: pilum in right hand, left hand on rim of grounded scutum
{ru:10, rf:0, lu:-6, lf:0 }, // samurai: yari in right hand, left arm at rest
{ru:10, rf:0, lu:-6, lf:0 } // infantryman: rifle at "order arms", left arm at rest
];
var PERIODS = [
{
title:'Roman legionary',
sub:'Legio XV Apollinaris, Danube frontier under Trajan',
date:'AD 105',
place:'Carnuntum, Pannonia (Danube frontier; modern Petronell, Austria)',
equip:'Lorica segmentata (Corbridge type) over a knee-length wool tunic; Imperial Gallic helmet with cheek-pieces and neck-guard; balteus with brass-plated apron; focale scarf; caligae',
mat:'Iron plates hinged and strapped on leather with brass fittings; iron helmet with brass trim; wool tunic; leather belt with tinned bronze plates; hobnailed leather caligae',
weap:'Pilum (heavy javelin: ash shaft, long iron shank) in hand; Pompeii-type gladius sheathed on the right hip from a baldric; curved plywood scutum with iron boss grounded at his left'
},
{
title:'Samurai of the Sengoku period',
sub:'Mounted retainer in tōsei gusoku, campaign of Nagashino',
date:'June 1575 (Tenshō 3)',
place:'Nagashino, Mikawa Province, Japan',
equip:'Tōsei gusoku: riveted okegawa nimai-dō with five kusazuri; sode; shino-gote sleeves; haidate; shino-suneate; suji-bachi kabuto with shikoro, fukigaeshi and crescent maedate; menpō with yodare-kake',
mat:'Black-lacquered iron plates and splints; dark-blue silk lacing (odoshi); hemp and cotton fabric; leather; gilt copper fittings; cotton tabi and straw waraji',
weap:'Mochi-yari (straight-bladed su-yari: steel blade, lacquered oak shaft) in hand; uchigatana worn edge-up through the obi at the left hip'
},
{
title:'British infantryman, BEF',
sub:'Private, New Army battalion, first day of the Somme',
date:'1 July 1916',
place:'The Somme, Picardy, France',
equip:'1902-pattern khaki Service Dress with 1908-pattern web equipment (belt, braces, two five-pouch cartridge carriers, bayonet frog, entrenching-tool helve, water bottle); Brodie steel helmet Mk I; puttees; B5 ammunition boots',
mat:'Wool serge; woven cotton webbing with brass buckles; pressed manganese-steel helmet with leather chinstrap; brass buttons; leather boots and scabbard',
weap:'Rifle, Short, Magazine Lee-Enfield Mk III (.303 in) with Pattern 1907 sword bayonet fixed; scabbard on the left hip is empty'
}
];
function handPos(sh, u, f){
var a = u*Math.PI/180, b = (u+f)*Math.PI/180;
var ex = sh.x - UPPER*Math.sin(a), ey = sh.y + UPPER*Math.cos(a);
return {x: ex - FORE_TO_HAND*Math.sin(b), y: ey + FORE_TO_HAND*Math.cos(b)};
}
// design-time hand anchors: the held items were drawn at these positions
var HR0 = handPos(SHOULDER_R, POSES[0].ru, POSES[0].rf);
var HL0 = handPos(SHOULDER_L, POSES[0].lu, POSES[0].lf);
var $ = function(id){ return document.getElementById(id); };
var armR=$('armR'), armL=$('armL'), foreR=$('foreR'), foreL=$('foreL');
var layers = [document.querySelectorAll('.p0'), document.querySelectorAll('.p1'), document.querySelectorAll('.p2')];
var rightHeld = [$('w-pilum'), $('w-yari'), $('w-smle')];
var leftHeld = [$('w-scutum')];
var hipHeld = [$('w-gladius'), $('w-saya')]; // fixed to the waist anchor
var slider = $('period');
function lerp(a,b,t){ return a + (b-a)*t; }
function fmt(n){ return (Math.round(n*1000)/1000).toString(); }
function clamp01(v){ return v<0?0:(v>1?1:v); }
function render(value){
var t = value/100; // 0..2
var i = Math.min(1, Math.floor(t)); // lower stop
var f = t - i; // fraction to next stop
var A = POSES[i], B = POSES[i+1];
var ru = lerp(A.ru,B.ru,f), rf = lerp(A.rf,B.rf,f), lu = lerp(A.lu,B.lu,f), lf = lerp(A.lf,B.lf,f);
armR.setAttribute('transform','rotate('+fmt(ru)+' '+SHOULDER_R.x+' '+SHOULDER_R.y+')');
foreR.setAttribute('transform','rotate('+fmt(rf)+' 0 '+UPPER+')');
armL.setAttribute('transform','rotate('+fmt(lu)+' '+SHOULDER_L.x+' '+SHOULDER_L.y+')');
foreL.setAttribute('transform','rotate('+fmt(lf)+' 0 '+UPPER+')');
// attach held items to the hand anchors
var hr = handPos(SHOULDER_R, ru, rf);
var trR = 'translate('+fmt(hr.x-HR0.x)+' '+fmt(hr.y-HR0.y)+')';
for (var k=0;k<rightHeld.length;k++) rightHeld[k].setAttribute('transform',trR);
// the shield is grounded; it stays on the Roman left-hand anchor
leftHeld[0].setAttribute('transform','translate(0 0)');
for (k=0;k<hipHeld.length;k++) hipHeld[k].setAttribute('transform','translate(0 0)');
// opacity per period layer
for (var p=0;p<3;p++){
var w = clamp01(1 - Math.abs(t - p));
var nodes = layers[p];
for (k=0;k<nodes.length;k++) nodes[k].style.opacity = w;
}
// labels
var atStop = (value % 100 === 0);
if (atStop){
var P = PERIODS[value/100];
$('lblTitle').textContent = P.title;
$('lblTitle').className = '';
$('lblSub').textContent = P.sub;
$('lblDate').textContent = P.date;
$('lblPlace').textContent = P.place;
$('lblEquip').textContent = P.equip;
$('lblMat').textContent = P.mat;
$('lblWeap').textContent = P.weap;
slider.setAttribute('aria-valuetext', P.title+', '+P.date);
} else {
var Pa = PERIODS[i], Pb = PERIODS[i+1], pct = Math.round(f*100);
$('lblTitle').textContent = 'Between periods';
$('lblTitle').className = 'between';
$('lblSub').textContent = 'Drawing is '+pct+'% of the way from '+Pa.title+' ('+Pa.date+') to '+Pb.title+' ('+Pb.date+'). Equipment of both is cross-fading; no single date applies.
Attachments
anthropic/claude-fable-5.1 — page