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
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 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.
Math.random, clocks, or accumulated state.localStorage, sessionStorage, cookies, or indexedDB.One line per period: date, place, equipment, weapon, and one specific detail a non-specialist might miss.
One paragraph explaining the attachment points, layer order, and interpolation between periods.
One fenced html block containing the complete page.
Name the least certain historical choice and any accuracy compromise you made for legibility.
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.
The SVG has one fixed base mannequin with named attachment anchors: head, neck, shoulderL/R, elbowL/R, wristL/R, handL/R, waist, hipL/R, kneeL/R, and ankleL/R. The layer order is base body first, then three equipment groups in chronological order — Roman, medieval, and musketeer. Within each equipment group the order is clothing, armour, belts/straps, helmet, arm defences, weapons, and shield or scabbard. The slider runs from 0 to 200 with stops at 0, 100, and 200; only the opacity of adjacent equipment groups is interpolated, while the body, anchors, torso, head, and legs never move or rescale. Returning to any slider value recreates the same group opacities and the same label exactly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Armoury Exhibit — One Figure, Three Periods</title>
<style>
:root {
--bg: #0e1115;
--panel: #151a20;
--panel-2: #1b2128;
--line: #4a3b28;
--brass: #d8b45f;
--brass-soft: #b8954a;
--ink: #f0eadf;
--muted: #a99b84;
--dim: #6f7a83;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(circle at 50% -10%, #2b333d 0%, #171c22 35%, #0b0e12 75%);
color: var(--ink);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.exhibit {
max-width: 1040px;
margin: 0 auto;
padding: 28px 18px 44px;
}
header {
margin-bottom: 18px;
}
.eyebrow {
margin: 0 0 6px;
color: var(--brass);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
h1 {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 500;
letter-spacing: -0.02em;
}
.intro {
max-width: 720px;
margin: 10px 0 0;
color: #c8c0b4;
line-height: 1.5;
font-size: 0.96rem;
}
.stage {
background:
linear-gradient(180deg, rgba(255,255,255,0.035), transparent 28%),
linear-gradient(180deg, #1a2027, #101419);
border: 1px solid var(--line);
border-radius: 18px;
padding: 16px 16px 14px;
box-shadow:
0 24px 70px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.05);
}
svg {
display: block;
width: 100%;
height: auto;
max-height: 72vh;
margin: 0 auto;
}
.controls {
margin-top: 8px;
padding: 12px 14px 10px;
background: rgba(0,0,0,0.22);
border: 1px solid rgba(216,180,95,0.18);
border-radius: 12px;
}
.controls label {
display: block;
margin-bottom: 8px;
color: var(--brass);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
input[type="range"] {
display: block;
width: 100%;
margin: 0;
accent-color: var(--brass);
cursor: pointer;
}
.ticks {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 7px;
color: var(--muted);
font-size: 0.72rem;
line-height: 1.2;
}
.ticks span {
flex: 1;
}
.ticks span:nth-child(2) { text-align: center; }
.ticks span:nth-child(3) { text-align: right; }
.label {
margin-top: 14px;
background:
linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%),
var(--panel);
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px 18px 14px;
box-shadow: 0 18px 44px rgba(0,0,0,0.3);
}
.label h2 {
margin: 0 0 10px;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.15rem, 2.4vw, 1.45rem);
font-weight: 500;
color: #e7c873;
letter-spacing: 0.01em;
}
.row {
display: grid;
grid-template-columns: 118px 1fr;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid rgba(169,155,132,0.14);
font-size: 0.92rem;
line-height: 1.38;
}
.row:last-of-type {
border-bottom: 0;
}
.row .key {
color: var(--muted);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding-top: 2px;
}
.row .val {
color: #e6ded2;
}
.detail {
margin-top: 10px;
padding: 10px 12px;
background: rgba(216,180,95,0.06);
border-left: 3px solid rgba(216,180,95,0.55);
border-radius: 0 8px 8px 0;
color: #cfc6b8;
font-size: 0.9rem;
line-height: 1.45;
}
@media (max-width: 560px) {
.row {
grid-template-columns: 92px 1fr;
gap: 8px;
font-size: 0.86rem;
}
.stage { padding: 10px 10px 12px; }
.label { padding: 14px; }
}
</style>
</head>
<body>
<main class="exhibit">
<header>
<p class="eyebrow">Museum Armoury · Re-equipment Study</p>
<h1>One Figure, Three Periods</h1>
<p class="intro">
Slide to re-equip the same fixed rig. The body, head, torso, and leg anchors never move;
only the attached clothing, armour, and weapons change.
</p>
</header>
<section class="stage" aria-label="Interactive armoury figure">
<svg id="exhibit-svg" viewBox="0 0 720 960" role="img" aria-labelledby="svg-title svg-desc">
<title id="svg-title">A standing mannequin re-equipped as a Roman legionary, a late-medieval knight, or a seventeenth-century musketeer</title>
<desc id="svg-desc">The figure remains fixed while armour and weapons are attached and blended between three chronological stops.</desc>
<defs>
<linearGradient id="mannequin" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#e3c69d"/>
<stop offset="1" stop-color="#c79a6b"/>
</linearGradient>
<linearGradient id="wood" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#c99a62"/>
<stop offset="1" stop-color="#8f5f31"/>
</linearGradient>
<linearGradient id="clothRed" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#b43a32"/>
<stop offset="1" stop-color="#7e211c"/>
</linearGradient>
<linearGradient id="iron" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#b9c1c6"/>
<stop offset="0.45" stop-color="#7f8a90"/>
<stop offset="1" stop-color="#4f5a60"/>
</linearGradient>
<linearGradient id="steel" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#eef2f5"/>
<stop offset="0.35" stop-color="#b8c2c8"/>
<stop offset="0.75" stop-color="#7d8a92"/>
<stop offset="1" stop-color="#55626a"/>
</linearGradient>
<linearGradient id="leather" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#8a5a32"/>
<stop offset="1" stop-color="#4a2b16"/>
</linearGradient>
<linearGradient id="buff" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#d2a36b"/>
<stop offset="1" stop-color="#9a6636"/>
</linearGradient>
<radialGradient id="boss" cx="35%" cy="30%" r="70%">
<stop offset="0" stop-color="#f0d98c"/>
<stop offset="0.6" stop-color="#b08d57"/>
<stop offset="1" stop-color="#6b4d28"/>
</radialGradient>
</defs>
<!-- Ground shadow -->
<ellipse cx="360" cy="890" rx="190" ry="20" fill="#000" opacity="0.24"/>
<!-- FIXED BASE RIG -->
<g id="rig" data-anchors="head,neck,shoulderL,shoulderR,elbowL,elbowR,wristL,wristR,handL,handR,waist,hipL,hipR,kneeL,kneeR,ankleL,ankleR">
<!-- Legs -->
<rect x="318" y="470" width="34" height="200" rx="17" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<rect x="368" y="470" width="34" height="200" rx="17" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<rect x="310" y="650" width="30" height="185" rx="15" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<rect x="380" y="650" width="30" height="185" rx="15" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<!-- Feet -->
<path d="M310 825 L310 850 Q310 866 330 866 L352 866 L345 842 L338 825 Z" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<path d="M382 825 L375 842 L368 866 L410 866 Q430 866 430 850 L430 825 Z" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<!-- Pelvis and torso -->
<rect x="320" y="430" width="80" height="65" rx="22" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<path d="M300 230 C295 280 305 350 318 410 L330 445 L390 445 L402 410 C415 350 425 280 420 230 C395 215 325 215 300 230 Z" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<!-- Neck and head -->
<rect x="348" y="184" width="24" height="30" rx="6" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<ellipse cx="360" cy="150" rx="30" ry="36" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<path d="M345 145 L350 145 M370 145 L375 145" stroke="#7a4f2a" stroke-width="2" stroke-linecap="round"/>
<!-- Arms -->
<rect x="272" y="240" width="26" height="105" rx="13" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<rect x="422" y="240" width="26" height="105" rx="13" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<rect x="274" y="340" width="22" height="105" rx="11" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<rect x="424" y="340" width="22" height="105" rx="11" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<!-- Hands -->
<circle cx="285" cy="455" r="14" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<circle cx="435" cy="455" r="14" fill="url(#mannequin)" stroke="#8b6038" stroke-width="2"/>
<!-- Named joint anchors -->
<g fill="#8b6038" stroke="#6b4525" stroke-width="1.5">
<circle id="anchor-neck" cx="360" cy="205" r="9"/>
<circle id="anchor-shoulderL" cx="285" cy="245" r="16"/>
<circle id="anchor-shoulderR" cx="435" cy="245" r="16"/>
<circle id="anchor-elbowL" cx="285" cy="345" r="12"/>
<circle id="anchor-elbowR" cx="435" cy="345" r="12"/>
<circle id="anchor-wristL" cx="285" cy="450" r="10"/>
<circle id="anchor-wristR" cx="435" cy="450" r="10"/>
<circle id="anchor-waist" cx="360" cy="430" r="10"/>
<circle id="anchor-hipL" cx="335" cy="480" r="14"/>
<circle id="anchor-hipR" cx="385" cy="480" r="14"/>
<circle id="anchor-kneeL" cx="325" cy="665" r="13"/>
<circle id="anchor-kneeR" cx="395" cy="665" r="13"/>
<circle id="anchor-ankleL" cx="325" cy="830" r="11"/>
<circle id="anchor-ankleR" cx="395" cy="830" r="11"/>
</g>
</g>
<!-- PERIOD 0: ROMAN LEGIONARY, 80 CE, ROME -->
<g id="period-roman" class="period" opacity="1">
<!-- Red wool tunic -->
<path d="M300 230 C290 300 300 380 315 440 L405 440 C420 380 430 300 420 230 C395 215 325 215 300 230 Z" fill="url(#clothRed)" stroke="#6e1f1a" stroke-width="2"/>
<rect x="266" y="245" width="38" height="85" rx="19" fill="url(#clothRed)" stroke="#6e1f1a" stroke-width="2"/>
<rect x="416" y="245" width="38" height="85" rx="19" fill="url(#clothRed)" stroke="#6e1f1a" stroke-width="2"/>
<path d="M315 430 L405 430 L425 570 L295 570 Z" fill="url(#clothRed)" stroke="#6e1f1a" stroke-width="2"/>
<path d="M320 450 L325 560 M345 450 L348 560 M375 450 L372 560 M400 450 L395 560" stroke="#7e2a22" stroke-width="2" opacity="0.65"/>
<!-- Neck scarf -->
<path d="M335 210 Q360 230 385 210 L390 225 Q360 245 330 225 Z" fill="#e8e0cf" stroke="#b8ad98" stroke-width="1.5"/>
<!-- Lorica segmentata: shoulder plates -->
<path d="M300 230 Q270 238 258 275 L298 295 Z" fill="url(#iron)" stroke="#4d565b" stroke-width="2"/>
<path d="M420 230 Q450 238 462 275 L422 295 Z" fill="url(#iron)" stroke="#4d565b" stroke-width="2"/>
<!-- Lorica segmentata: torso bands -->
<path d="M302 260 Q360 280 418 260 L420 292 Q360 312 300 292 Z" fill="url(#iron)" stroke="#4d565b" stroke-width="2"/>
<path d="M300 300 Q360 320 420 300 L422 332 Q360 352 298 332 Z" fill="url(#iron)" stroke="#4d565b" stroke-width="2"/>
<path d="M298 340 Q360 360 422 340 L424 372 Q360 392 296 372 Z" fill="url(#iron)" stroke="#4d565b" stroke-width="2"/>
<path d="M296 380 Q360 400 424 380 L426 412 Q360 432 294 412 Z" fill="url(#iron)" stroke="#4d565b" stroke-width="2"/>
<!-- Rivets and hinges -->
<g fill="#d7dde0" stroke="#4d565b" stroke-width="1">
<circle cx="360" cy="275" r="3"/>
<circle cx="360" cy="315" r="3"/>
<circle cx="360" cy="355" r="3"/>
<circle cx="360" cy="395" r="3"/>
<circle cx="320" cy="285" r="2.5"/>
<circle cx="400" cy="285" r="2.5"/>
<circle cx="316" cy="325" r="2.5"/>
<circle cx="404" cy="325" r="2.5"/>
<circle cx="314" cy="365" r="2.5"/>
<circle cx="406" cy="365" r="2.5"/>
</g>
<!-- Leather belt and apron -->
<rect x="308" y="418" width="104" height="24" rx="7" fill="url(#leather)" stroke="#3d2415" stroke-width="2"/>
<rect x="350" y="421" width="20" height="18" rx="3" fill="#b08d57" stroke="#6b4d28" stroke-width="1.5"/>
<g fill="url(#leather)" stroke="#3d2415" stroke-width="1.5">
<rect x="320" y="442" width="8" height="78" rx="3"/>
<rect x="338" y="442" width="8" height="86" rx="3"/>
<rect x="356" y="442" width="8" height="90" rx="3"/>
<rect x="374" y="442" width="8" height="86" rx="3"/>
<rect x="392" y="442" width="8" height="78" rx="3"/>
</g>
<g fill="#d7dde0">
<circle cx="324" cy="460" r="2.5"/><circle cx="324" cy="490" r="2.5"/>
<circle cx="342" cy="460" r="2.5"/><circle cx="342" cy="500" r="2.5"/>
<circle cx="360" cy="460" r="2.5"/><circle cx="360" cy="510" r="2.5"/>
<circle cx="378" cy="460" r="2.5"/><circle cx="378" cy="500" r="2.5"/>
<circle cx="396" cy="460" r="2.5"/><circle cx="396" cy="490" r="2.5"/>
</g>
<!-- Imperial Gallic helmet -->
<path d="M325 150 Q325 100 360 90 Q395 100 395 150 L390 172 Q360 158 330 172 Z" fill="url(#iron)" stroke="#4d565b" stroke-width="2"/>
<path d="M325 165 Q360 185 395 165 L400 192 Q360 214 320 192 Z" fill="url(#iron)" stroke="#4d565b" stroke-width="2"/>
<path d="M330 150 L320 192 Q335 208 346 192 L346 155 Z" fill="url(#iron)" stroke="#4d565b" stroke-width="2"/>
<path d="M390 150 L400 192 Q385 208 374 192 L374 155 Z" fill="url(#iron)" stroke="#4d565b" stroke-width="2"/>
<path d="M330 145 Q360 132 390 145" fill="none" stroke="#d7dde0" stroke-width="3" stroke-linecap="round"/>
<path d="M338 160 Q360 150 382 160" fill="none" stroke="#4d565b" stroke-width="2"/>
<circle cx="333" cy="175" r="2" fill="#d7dde0"/>
<circle cx="387" cy="175" r="2" fill="#d7dde0"/>
<!-- Gladius scabbard on right hip -->
<path d="M408 438 L430 438 L426 570 L414 570 Z" fill="url(#leather)" stroke="#3d2415" stroke-width="2"/>
<path d="M410 450 L428 450 M412 560 L426 560" stroke="#b08d57" stroke-width="3"/>
<rect x="402" y="424" width="34" height="9" rx="4" fill="#b08d57" stroke="#6b4d28" stroke-width="1.5"/>
<rect x="414" y="398" width="10" height="28" rx="3" fill="#5a3a2e" stroke="#3d2415" stroke-width="1.5"/>
<circle cx="419" cy="394" r="8" fill="#b08d57" stroke="#6b4d28" stroke-width="1.5"/>
<!-- Pilum in right hand -->
<rect x="431" y="220" width="8" height="600" rx="3" fill="url(#wood)" stroke="#6b4525" stroke-width="1.5"/>
<rect x="433" y="180" width="4" height="50" fill="url(#iron)" stroke="#4d565b" stroke-width="1"/>
<path d="M435 158 L425 190 L445 190 Z" fill="url(#iron)" stroke="#4d565b" stroke-width="1.5"/>
<rect x="428" y="812" width="14" height="12" rx="2" fill="url(#iron)" stroke="#4d565b" stroke-width="1.5"/>
<circle cx="435" cy="455" r="13" fill="url(#mannequin)" stroke="#6b4525" stroke-width="2"/>
<path d="M426 450 Q435 442 444 450" fill="none" stroke="#6b4525" stroke-width="2"/>
<!-- Curved scutum -->
<path d="M170 310 Q150 460 170 610 L290 610 Q310 460 290 310 Z" fill="#9c2f28" stroke="#5d1a16" stroke-width="3"/>
<path d="M180 320 Q165 460 180 600 L280 600 Q295 460 280 320 Z" fill="none" stroke="#d9b45b" stroke-width="4"/>
<path d="M230 320 L230 600" stroke="#d9b45b" stroke-width="3" opacity="0.8"/>
<path d="M230 380 Q190 360 180 390 Q210 400 230 430 Q250 400 280 390 Q270 360 230 380 Z" fill="#d9b45b" opacity="0.9"/>
<path d="M230 520 Q190 540 180 510 Q210 500 230 470 Q250 500 280 510 Q270 540 230 520 Z" fill="#d9b45b" opacity="0.9"/>
<circle cx="230" cy="460" r="34" fill="url(#boss)" stroke="#6b4d28" stroke-width="3"/>
<circle cx="230" cy="460" r="22" fill="none" stroke="#f0d98c" stroke-width="2"/>
<rect x="280" y="440" width="14" height="30" rx="5" fill="url(#leather)" stroke="#3d2415" stroke-width="1.5"/>
</g>
<!-- PERIOD 1: LATE-MEDIEVAL KNIGHT, 1415, AGINCOURT -->
<g id="period-medieval" class="period" opacity="0">
<!-- Arming doublet and hose -->
<path d="M300 230 C290 300 300 380 315 440 L405 440 C420 380 430 300 420 230 C395 215 325 215 300 230 Z" fill="#4a2f26" stroke="#2e1a14" stroke-width="2"/>
<rect x="266" y="245" width="38" height="85" rx="19" fill="#4a2f26" stroke="#2e1a14" stroke-width="2"/>
<rect x="416" y="245" width="38" height="85" rx="19" fill="#4a2f26" stroke="#2e1a14" stroke-width="2"/>
<rect x="316" y="470" width="36" height="200" rx="18" fill="#3b3b3f" stroke="#242426" stroke-width="2"/>
<rect x="368" y="470" width="36" height="200" rx="18" fill="#3b3b3f" stroke="#242426" stroke-width="2"/>
<rect x="310" y="650" width="30" height="185" rx="15" fill="#3b3b3f" stroke="#242426" stroke-width="2"/>
<rect x="380" y="650" width="30" height="185" rx="15" fill="#3b3b3f" stroke="#242426" stroke-width="2"/>
<!-- Plate legs: cuisses, poleyns, greaves, sabatons -->
<path d="M314 480 Q300 540 310 640 L342 640 Q350 540 340 480 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M380 480 Q370 540 378 640 L410 640 Q420 540 406 480 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<circle cx="325" cy="665" r="24" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M305 665 Q295 650 300 640 Q315 650 325 645 Q335 650 350 640 Q355 650 345 665 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<circle cx="395" cy="665" r="24" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M375 665 Q365 650 370 640 Q385 650 395 645 Q405 650 420 640 Q425 650 415 665 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M310 680 Q305 750 310 825 L340 825 Q345 750 340 680 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M380 680 Q375 750 380 825 L410 825 Q415 750 410 680 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M310 825 L310 850 Q310 866 330 866 L352 866 L345 842 L338 825 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M382 825 L375 842 L368 866 L410 866 Q430 866 430 850 L430 825 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M310 842 L350 842 M382 842 L428 842" stroke="#59646b" stroke-width="2"/>
<!-- Breastplate and plackart -->
<path d="M305 240 C298 290 305 360 318 410 L402 410 C415 360 422 290 415 240 C390 225 330 225 305 240 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2.5"/>
<path d="M360 245 L360 405" stroke="#eef2f5" stroke-width="2" opacity="0.7"/>
<path d="M318 400 Q360 420 402 400 L408 425 L312 425 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<!-- Fauld lames and tassets -->
<path d="M312 425 Q360 445 408 425 L412 445 Q360 465 308 445 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M308 445 Q360 465 412 445 L416 465 Q360 485 304 465 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M308 462 L340 472 L330 540 L298 528 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M412 462 L380 472 L390 540 L422 528 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<!-- Gorget -->
<path d="M330 210 Q360 230 390 210 L396 232 Q360 254 324 232 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<!-- Layered pauldrons -->
<path d="M300 230 Q265 235 255 280 Q280 300 305 285 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M300 250 Q270 255 262 295 Q285 310 306 298 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M420 230 Q455 235 465 280 Q440 300 415 285 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M420 250 Q450 255 458 295 Q435 310 414 298 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<!-- Besagews -->
<circle cx="300" cy="300" r="14" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<circle cx="420" cy="300" r="14" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<!-- Arm harness: rerebrace, couter, vambrace, gauntlet -->
<path d="M270 250 Q260 290 270 335 L300 335 Q310 290 300 250 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M420 250 Q410 290 420 335 L450 335 Q460 290 450 250 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<circle cx="285" cy="345" r="22" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M265 345 Q255 330 260 320 Q275 330 285 325 Q295 330 310 320 Q315 330 305 345 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<circle cx="435" cy="345" r="22" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M415 345 Q405 330 410 320 Q425 330 435 325 Q445 330 460 320 Q465 330 455 345 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M272 355 Q265 395 274 445 L296 445 Q305 395 298 355 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M424 355 Q415 395 424 445 L446 445 Q455 395 448 355 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M270 440 Q260 455 270 470 L300 470 Q310 455 300 440 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M420 440 Q410 455 420 470 L450 470 Q460 455 450 440 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M272 452 L298 452 M422 452 L448 452" stroke="#59646b" stroke-width="2"/>
<!-- Bascinet with pointed visor and aventail -->
<path d="M325 150 Q325 100 360 90 Q395 100 395 150 L390 172 Q360 158 330 172 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2.5"/>
<path d="M330 150 Q360 135 390 150 L412 168 Q380 188 360 188 Q340 188 328 170 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2.5"/>
<path d="M338 158 L386 158" stroke="#2b3033" stroke-width="3"/>
<circle cx="370" cy="172" r="2" fill="#2b3033"/>
<circle cx="380" cy="172" r="2" fill="#2b3033"/>
<circle cx="390" cy="172" r="2" fill="#2b3033"/>
<path d="M325 170 Q360 210 395 170 L400 220 Q360 245 320 220 Z" fill="#6b6f72" stroke="#4b4f52" stroke-width="2"/>
<g fill="none" stroke="#9aa0a3" stroke-width="1" opacity="0.8">
<path d="M330 185 Q360 210 390 185"/>
<path d="M328 200 Q360 225 392 200"/>
<path d="M326 215 Q360 238 394 215"/>
</g>
<!-- Rivets -->
<g fill="#eef2f5" stroke="#59646b" stroke-width="1">
<circle cx="360" cy="260" r="3"/>
<circle cx="360" cy="300" r="3"/>
<circle cx="360" cy="340" r="3"/>
<circle cx="330" cy="280" r="2.5"/>
<circle cx="390" cy="280" r="2.5"/>
<circle cx="325" cy="500" r="2.5"/>
<circle cx="395" cy="500" r="2.5"/>
</g>
<!-- Sword sheathed at left hip -->
<path d="M300 438 L322 438 L316 585 L306 585 Z" fill="url(#leather)" stroke="#3d2415" stroke-width="2"/>
<rect x="294" y="424" width="34" height="9" rx="4" fill="url(#steel)" stroke="#59646b" stroke-width="1.5"/>
<rect x="306" y="398" width="10" height="28" rx="3" fill="#3b2a22" stroke="#241812" stroke-width="1.5"/>
<circle cx="311" cy="394" r="8" fill="url(#steel)" stroke="#59646b" stroke-width="1.5"/>
<!-- Pollaxe in right hand -->
<rect x="431" y="250" width="8" height="570" rx="3" fill="url(#wood)" stroke="#6b4525" stroke-width="1.5"/>
<rect x="428" y="250" width="14" height="80" rx="2" fill="url(#steel)" stroke="#59646b" stroke-width="1.5"/>
<path d="M435 250 L482 235 L492 290 L435 305 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M445 255 L480 245" stroke="#eef2f5" stroke-width="2" opacity="0.7"/>
<path d="M435 260 L400 248 L392 288 L435 298 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M435 170 L425 250 L445 250 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M435 820 L428 838 L442 838 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M420 440 Q410 455 420 470 L450 470 Q460 455 450 440 Z" fill="url(#steel)" stroke="#59646b" stroke-width="2"/>
<path d="M422 452 L448 452" stroke="#59646b" stroke-width="2"/>
</g>
<!-- PERIOD 2: MUSKETEER, 1642, EDGEHILL -->
<g id="period-musketeer" class="period" opacity="0">
<!-- Breeches, hose, shoes -->
<rect x="