17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
19:45Fable 5.1 writes an animated novel using Ren'Py... did it do better than Sol Pro 5.6?
Sep 1, 2026 · YouTube
14:09Testing IBM Granite-4.2-8B! Can it name 100 women?
Aug 31, 2026 · YouTube
17:37Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?
Aug 28, 2026 · YouTube
23:58Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok
Aug 27, 2026 · YouTube
14:50Stealth Ox Alpha: a new GLM model! Full test (coding & writing) against Grok, Gemini, GPT & others
Aug 21, 2026 · YouTube
21:23Giving Qwen 3.8 27B another chance (+ GLM 5.2). Testing against GPT, Gemini, Grok etc.
Aug 18, 2026 · YouTube
51:00AI Coding Showdown: Grok 4.6, Gemini 3.7, Terra-Pro, Qwen3.8 2.4TB, Muse Glimmer & more
Aug 15, 2026 · YouTube
27:51Testing Gemini 3.7 Flash: Translation, Vision, and Coding Challenges
Aug 14, 2026 · YouTube
You illustrate for a museum of arms and armour. Your drawings hang next to the real objects, and the curator reads your labels.
Build me the armoury slider: one HTML page, one figure, three eras.
A single standing figure. Below it, a slider. Drag the slider and the same figure is re-equipped for the era it lands on.
That is the exhibit. It lives or dies on the drawing, so draw properly.
You choose all three yourself, and the choosing is part of the work. Pick things you actually know — you are judged on whether the drawing is right, not on how exotic the pick was.
1. Anywhere in the last five hundred years. Any year from 1526 onwards, anywhere on earth. Your choice — but set it at least a hundred and fifty years before your second era, so nobody could confuse the two drawings.
2. About a hundred years ago. A specific year between 1910 and 1945, and a specific place. Yours to pick.
3. Sometime between 2040 and 2140. Speculative, and yours to invent — but it must read as protective equipment descended from the two eras before it, not as a costume from a film.
Name the year and the place for all three. "Seventeenth-century Europe" is not an era; 1631, Saxony is.
1. One body. It is the same person all three times. Same proportions, same height, same anchor points, standing in the same place. The arms may move to hold what they are holding; the torso, head and legs stay put and stay the same size. Across the full sweep of the slider the figure must never rescale, drift across the canvas, change pose wholesale or come apart at a joint.
This is an architectural requirement, not a styling note. Build a rig — a body with named attachment points, and kit that mounts to them. Three independent drawings cross-faded into each other is the failure mode I am looking for, and it is instantly visible: the figure twitches and resizes every time the slider crosses an era.
2. Continuity and reversibility. Dragging must never make the figure jump. Between two eras there is a transition, not a cut. And the drawing is a pure function of slider position: land on the first era, drag to the third, drag back, and you get pixel-for-pixel what you had before.
Your three choices are made once, by you, while you write the file. Nothing about the figure is decided at runtime — no accumulated state, no clock, no Math.random anywhere.
3. The label. Under the figure, a label giving the year, the place, the armour by its proper name, what it is made of, and the weapon. Between eras, the label says what it is between.
The label must describe the figure actually drawn above it. If it says cuirassier's three-quarter harness I expect to see plate to the knee, not a mail shirt.
4. The weapon is dated as tightly as the armour. It is not a prop. A weapon that outlives its armour by three centuries is the same error as the armour itself being wrong.
5. No horned Viking helmets. They never existed — nineteenth-century opera costume, not archaeology. Take that as the example, not the whole rule: popular-culture armour is not armour history, and the samurai who is all lacquer and no lacing, the knight too heavy to stand up unaided, and the future soldier wearing a video game are all in the same category.
data: URIs are fine.localStorage, sessionStorage, cookies or indexedDB. It runs in a sandboxed frame where touching them throws.html block.Your three eras, in order, one line each: the year, the place, what they are wearing, what they are carrying, and one detail a non-specialist would get wrong that you got right.
One paragraph. Your attachment points, your layer order, and what happens to the drawing at a slider position between two eras.
The single fenced html block.
Which of your three is the shakiest historically, and why. Name the anachronism you were most tempted by. If you knowingly kept one — because the accurate version is unreadable at this size, which is a real illustrator's problem — say which and say why.
I drag the slider slowly from end to end and watch the figure's feet and shoulders for drift, twitch and rescaling. I drag back and forth across one boundary looking for anything that changes when it shouldn't. I read every label against its drawing. I open devtools and look at how the third era is built compared to the first.
That last one matters. Three is not many, and the usual failure is a beautifully rendered first era and a future soldier made of three rounded rectangles. The last era gets the same care as the first. I will drag straight to the end before I do anything else.
If you ran out of room and know it, say so in "The weakest era". A stated weakness is a finding. Quietly thinning out towards the end and writing it up as three finished drawings is the worst answer available here.
The SVG has one fixed anatomical under-figure with named anchor points for crown, shoulders, elbows, wrists, waist, hips, knees and ankles; its torso, head, legs, boots and ground position never change. Era-specific equipment is layered onto those fixed coordinates in this order: undergarment, torso and limb protection, helmet, belts and pouches, hands, then weapon. The slider only changes deterministic opacity weights for the equipment mounted to the shared rig: approaching a landmark fades one fitted kit out while the next fades in at exactly the same attachment points, with no scaling, translation, randomness or accumulated state.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Armoury Slider — One Figure, Three Eras</title>
<style>
:root {
--paper: #eee8d8;
--ink: #201e19;
--muted: #625d52;
--rule: #aaa18e;
--panel: #f8f4e9;
--accent: #7c3026;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #d9d2c1;
color: var(--ink);
font-family: Georgia, "Times New Roman", serif;
}
main {
width: min(760px, 100%);
padding: 24px 22px 30px;
}
header { text-align: center; margin-bottom: 4px; }
h1 {
font-size: clamp(1.45rem, 4vw, 2.15rem);
font-weight: normal;
margin: 0;
letter-spacing: .035em;
}
header p {
margin: 7px 0 16px;
color: var(--muted);
font-size: .96rem;
font-style: italic;
}
.case {
background: var(--paper);
border: 1px solid #aaa18e;
box-shadow: 0 6px 22px rgba(45, 38, 24, .14);
padding: 14px 14px 18px;
}
svg {
display: block;
width: min(100%, 540px);
height: auto;
margin: 0 auto;
}
.controls {
width: min(100%, 560px);
margin: 7px auto 0;
}
input[type="range"] {
width: 100%;
accent-color: var(--accent);
cursor: ew-resize;
}
.ticks {
display: flex;
justify-content: space-between;
color: var(--muted);
font-size: .74rem;
margin: 0 2px 13px;
}
#label {
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
background: var(--panel);
min-height: 89px;
padding: 11px 15px;
line-height: 1.35;
text-align: center;
}
#label .year {
display: block;
color: var(--accent);
font-size: 1.05rem;
letter-spacing: .08em;
font-variant: small-caps;
}
#label .description { display: block; margin-top: 3px; }
#label .between {
display: block;
color: var(--muted);
font-style: italic;
margin-top: 5px;
font-size: .91rem;
}
.caption {
text-align: center;
color: var(--muted);
font-size: .78rem;
margin: 12px 0 0;
}
/* Shared figure */
.outline { stroke: #211f1a; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.fine { stroke: #211f1a; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.stitched { stroke-dasharray: 3 3; }
.under { fill: #5c625d; }
.skin { fill: #a97456; }
.sole { fill: #2d2a25; }
.era { pointer-events: none; }
.metal { fill: #4c5352; }
.metal-hi { fill: #7f8884; }
.blackplate { fill: #313738; }
.leather { fill: #735337; }
.buff { fill: #bd9e67; }
.wool { fill: #6e7c69; }
.web { fill: #806b47; }
.wood { fill: #704d2c; }
.future-soft { fill: #35434a; }
.future-plate { fill: #607680; }
.future-edge { fill: #b7c8c7; }
.ceramic { fill: #4e5e63; }
.signal { fill: #b35235; }
.shadow { fill: #aaa18e; opacity: .35; }
/* The named circles are retained in devtools as rig attachment points. */
#rig circle { fill: #b43b2a; opacity: 0; }
</style>
</head>
<body>
<main>
<header>
<h1>The Armoury Slider</h1>
<p>One standing body; three historically connected protective systems.</p>
</header>
<section class="case" aria-label="Interactive armoury illustration">
<svg viewBox="0 0 500 650" role="img" aria-labelledby="svgTitle svgDesc">
<title id="svgTitle">A fixed standing figure equipped across three eras</title>
<desc id="svgDesc">A shared body rig is fitted with a seventeenth-century cuirassier harness, a 1939 Polish infantry uniform, and a speculative 2075 modular protective ensemble.</desc>
<ellipse class="shadow" cx="250" cy="606" rx="112" ry="10"/>
<!-- Shared, immovable anatomical under-figure -->
<g id="body" aria-label="shared body">
<path class="outline skin" d="M229 103 Q229 76 250 73 Q272 76 272 103 L269 143 Q260 154 250 154 Q239 154 231 143Z"/>
<path class="outline under" d="M203 162 Q220 147 250 150 Q280 147 297 162 L307 291 L287 337 L213 337 L193 291Z"/>
<path class="outline under" d="M203 168 Q181 180 170 222 L180 311 L198 307 L205 235 L223 190Z"/>
<path class="outline under" d="M297 168 Q319 180 330 222 L320 311 L302 307 L295 235 L277 190Z"/>
<path class="outline skin" d="M177 304 L197 302 L202 326 Q192 342 178 332Z"/>
<path class="outline skin" d="M323 304 L303 302 L298 326 Q308 342 322 332Z"/>
<path class="outline under" d="M216 332 L249 334 L247 443 L214 523 L191 519 L211 430Z"/>
<path class="outline under" d="M251 334 L284 332 L289 430 L309 519 L286 523 L253 443Z"/>
<path class="outline sole" d="M191 516 L216 520 L218 566 Q206 579 171 574 L169 561 L190 551Z"/>
<path class="outline sole" d="M284 520 L309 516 L310 551 L331 561 L329 574 Q294 579 282 566Z"/>
</g>
<!-- Named, fixed attachment points: never translated or scaled. -->
<g id="rig" aria-label="fixed mounting points">
<circle id="crown" cx="250" cy="76" r="4"/>
<circle id="neck" cx="250" cy="151" r="4"/>
<circle id="leftShoulder" cx="203" cy="169" r="4"/>
<circle id="rightShoulder" cx="297" cy="169" r="4"/>
<circle id="leftElbow" cx="179" cy="258" r="4"/>
<circle id="rightElbow" cx="321" cy="258" r="4"/>
<circle id="leftWrist" cx="189" cy="313" r="4"/>
<circle id="rightWrist" cx="311" cy="313" r="4"/>
<circle id="waist" cx="250" cy="328" r="4"/>
<circle id="leftHip" cx="220" cy="337" r="4"/>
<circle id="rightHip" cx="280" cy="337" r="4"/>
<circle id="leftKnee" cx="219" cy="442" r="4"/>
<circle id="rightKnee" cx="281" cy="442" r="4"/>
<circle id="leftAnkle" cx="202" cy="520" r="4"/>
<circle id="rightAnkle" cx="298" cy="520" r="4"/>
<circle id="weaponGrip" cx="310" cy="313" r="4"/>
</g>
<!-- 1625: Dresden cuirassier equipment, all mounted to shared points -->
<g id="era0" class="era" aria-label="1625 Dresden cuirassier">
<!-- tall boots, because the plate harness ends at the knee -->
<path class="outline leather" d="M192 435 L224 437 L218 521 L210 549 L185 548 L188 511Z"/>
<path class="outline leather" d="M276 437 L308 435 L312 511 L315 548 L290 549 L282 521Z"/>
<path class="fine" d="M190 476 L219 478 M187 505 L215 507 M281 478 L310 476 M285 507 L313 505"/>
<!-- cuisses and poleyns -->
<path class="outline blackplate" d="M211 333 L247 337 L245 410 L230 438 L207 429 L210 378Z"/>
<path class="outline blackplate" d="M253 337 L289 333 L290 378 L293 429 L270 438 L255 410Z"/>
<path class="outline metal-hi" d="M204 424 Q219 412 235 424 L237 443 Q220 454 202 441Z"/>
<path class="outline metal-hi" d="M265 424 Q281 412 296 424 L298 441 Q280 454 263 443Z"/>
<path class="fine" d="M216 353 L240 356 M215 374 L239 377 M260 356 L284 353 M261 377 L285 374"/>
<!-- tassets, cuirass and back edge -->
<path class="outline blackplate" d="M205 287 L246 290 L245 347 L215 350 L204 326Z"/>
<path class="outline blackplate" d="M254 290 L295 287 L296 326 L285 350 L255 347Z"/>
<path class="outline blackplate" d="M205 169 Q249 151 295 169 L301 278 Q276 294 250 291 Q224 294 199 278Z"/>
<path class="outline metal-hi" d="M212 174 Q250 160 288 174 L291 271 Q250 282 209 271Z"/>
<path class="fine" d="M250 169 L250 280 M215 195 Q250 186 285 195 M210 249 Q250 258 290 249"/>
<circle class="outline metal-hi" cx="250" cy="211" r="4"/>
<!-- pauldrons, vambraces, cuff gauntlets -->
<path class="outline blackplate" d="M198 168 Q179 174 173 199 L184 220 L207 191Z"/>
<path class="outline blackplate" d="M302 168 Q321 174 327 199 L316 220 L293 191Z"/>
<path class="outline metal" d="M173 214 L184 215 L194 298 L178 303 L169 253Z"/>
<path class="outline metal" d="M327 214 L316 215 L306 298 L322 303 L331 253Z"/>
<path class="outline metal-hi" d="M174 295 L197 294 L200 319 L181 329Z"/>
<path class="outline metal-hi" d="M326 295 L303 294 L300 319 L319 329Z"/>
<path class="fine" d="M177 236 L189 234 M323 236 L311 234"/>
<!-- zischägge: skull, peak, nasal bar and lobster-tail neck guard -->
<path class="outline blackplate" d="M222 105 Q223 72 250 62 Q278 72 278 105 L269 126 L231 126Z"/>
<path class="outline metal-hi" d="M228 99 Q250 83 272 99 L271 110 L229 110Z"/>
<path class="outline metal" d="M235 121 L265 121 L271 145 L229 145Z"/>
<path class="fine" d="M250 67 L250 119 M228 128 L272 128 M232 136 L268 136"/>
<path class="outline blackplate" d="M220 103 L281 103 L274 112 L222 112Z"/>
<path class="outline metal-hi" d="M247 104 L254 104 L253 130 L248 130Z"/>
<!-- pistol held at right wrist: short barrel, wheel lock and pommel -->
<g transform="rotate(-22 311 313)">
<path class="outline wood" d="M304 311 L330 319 L339 359 L327 364 L314 335 L301 330Z"/>
<path class="outline metal" d="M298 302 L333 302 L340 310 L302 312Z"/>
<circle class="outline metal-hi" cx="311" cy="316" r="7"/>
<path class="fine" d="M332 305 L353 305 M353 305 L357 308"/>
</g>
</g>
<!-- 1939: Warsaw Polish infantry equipment -->
<g id="era1" class="era" aria-label="1939 Warsaw Polish infantryman">
<!-- high shoes and puttees -->
<path class="outline leather" d="M191 486 L220 488 L219 548 L188 548Z"/>
<path class="outline leather" d="M280 488 L309 486 L312 548 L281 548Z"/>
<path class="fine stitched" d="M193 494 L219 498 M191 505 L218 509 M189 516 L217 520 M281 498 L308 494 M282 509 L310 505 M283 520 L311 516"/>
<!-- wool trousers, tunic skirt, leather belt -->
<path class="outline wool" d="M211 327 L247 330 L244 438 L225 479 L205 476 L212 415Z"/>
<path class="outline wool" d="M253 330 L289 327 L288 415 L295 476 L275 479 L256 438Z"/>
<path class="outline wool" d="M199 171 Q250 153 301 171 L302 293 Q281 316 250 315 Q219 316 198 293Z"/>
<path class="outline web" d="M199 278 Q250 286 301 278 L301 291 Q250 299 199 291Z"/>
<rect class="outline metal-hi" x="243" y="279" width="14" height="14"/>
<!-- collar, pockets, straps and bread bag -->
<path class="outline wool" d="M230 158 L270 158 L266 178 L234 178Z"/>
<path class="fine" d="M250 179 L250 279 M213 203 L238 203 L238 229 L212 229 M262 203 L287 203 L288 229 L262 229"/>
<path class="fine" d="M207 175 L249 281 M293 175 L251 281"/>
<path class="outline web" d="M287 239 L313 245 L310 289 L285 287Z"/>
<!-- sleeves and simplified hands -->
<path class="outline wool" d="M199 170 Q178 183 173 222 L180 301 L197 299 L204 230 L219 188Z"/>
<path class="outline wool" d="M301 170 Q322 183 327 222 L320 301 L303 299 L296 230 L281 188Z"/>
<path class="outline leather" d="M177 296 L199 295 L201 318 L181 326Z"/>
<path class="outline leather" d="M323 296 L301 295 L299 318 L319 326Z"/>
<!-- wz.31 helmet: its pressed comb is visible -->
<path class="outline metal" d="M217 105 Q219 76 250 69 Q281 76 283 105 L276 126 Q250 137 224 126Z"/>
<path class="outline metal-hi" d="M246 74 L254 74 L261 111 L239 111Z"/>
<path class="fine" d="M220 108 Q250 119 280 108 M231 124 L231 139 M269 124 L269 139"/>
<path class="outline leather" d="M234 132 L266 132 L264 148 L236 148Z"/>
<!-- Karabinek wz.29, fixed at the same hand/grip anchor -->
<g transform="rotate(-28 310 313)">
<path class="outline wood" d="M302 304 L317 307 L337 455 L324 458 L309 346 L298 334Z"/>
<path class="outline metal" d="M304 285 L315 285 L323 404 L314 405Z"/>
<path class="outline metal" d="M307 282 L315 282 L318 264 L311 264Z"/>
<path class="fine" d="M311 303 L323 303 M320 385 L330 385"/>
<path class="outline metal-hi" d="M310 404 L321 404 L324 438 L317 438Z"/>
</g>
</g>
<!-- 2075: detailed, non-powered modular protective ensemble -->
<g id="era2" class="era" aria-label="2075 Warsaw modular composite protective ensemble">
<!-- boot shells, shin plates and articulated knees -->
<path class="outline future-soft" d="M187 476 L220 478 L220 548 L184 549 L185 518Z"/>
<path class="outline future-soft" d="M280 478 L313 476 L315 518 L316 549 L280 548Z"/>
<path class="outline future-plate" d="M190 484 L217 486 L214 522 L188 521Z"/>
<path class="outline future-plate" d="M283 486 L310 484 L312 521 L286 522Z"/>
<path class="fine" stroke="#d5e0db" d="M192 497 L215 499 M191 509 L214 511 M285 499 L308 497 M286 511 L309 509"/>
<path class="outline ceramic" d="M204 423 Q219 412 236 425 L237 445 L221 453 L203 443Z"/>
<path class="outline ceramic" d="M264 425 Q281 412 296 423 L297 443 L279 453 L263 445Z"/>
<circle class="outline future-edge" cx="220" cy="435" r="4"/>
<circle class="outline future-edge" cx="280" cy="435" r="4"/>
<!-- flexible trouser armour and separate thigh strike panels -->
<path class="outline future-soft" d="M211 329 L247 332 L245 421 L229 427 L207 417 L211 376Z"/>
<path class="outline future-soft" d="M253 332 L289 329 L289 376 L293 417 L271 427 L255 421Z"/>
<path class="outline future-plate" d="M214 347 L243 350 L241 402 L226 413 L211 405Z"/>
<path class="outline future-plate" d="M257 350 L286 347 L289 405 L274 413 L259 402Z"/>
<path class="fine" stroke="#d5e0db" d="M218 365 L240 367 M217 384 L239 386 M260 367 L282 365 M261 386 L283 384"/>
<!-- segmented pelvic fauld: a direct descendant of tassets -->
<path class="outline future-soft" d="M200 287 L300 287 L298 328 L283 344 L250 337 L217 344 L202 328Z"/>
<path class="outline future-plate" d="M204 294 L230 295 L230 331 L211 335 L204 322Z"/>
<path class="outline future-plate" d="M233 294 L267 294 L267 334 L250 330 L233 334Z"/>
<path class="outline future-plate" d="M270 295 L296 294 L296 322 L289 335 L270 331Z"/>
<path class="fine" stroke="#d5e0db" d="M214 304 L222 304 M241 304 L259 304 M278 304 L286 304"/>
<!-- textile carrier, rigid cuirass, collar and exposed service seams -->
<path class="outline future-soft" d="M198 167 Q250 148 302 167 L305 288 Q250 304 195 288Z"/>
<path class="outline future-plate" d="M210 178 Q250 163 290 178 L294 267 L278 282 L250 275 L222 282 L206 267Z"/>
<path class="outline ceramic" d="M220 188 Q250 178 280 188 L280 235 Q250 246 220 235Z"/>
<path class="fine" stroke="#d5e0db" d="M214 255 L286 255 M250 179 L250 274 M227 197 L227 228 M273 197 L273 228"/>
<path class="outline future-edge" d="M225 153 L275 153 L281 177 L219 177Z"/>
<path class="fine" stroke="#233036" d="M235 160 L265 160"/>
<!-- layered shoulder tiles, forearm shells, tactile gloves -->
<path class="outline future-plate" d="M197 166 Q177 173 171 197 L183 219 L206 191Z"/>
<path class="outline future-plate" d="M303 166 Q323 173 329 197 L317 219 L294 191Z"/>
<path class="fine" stroke="#d5e0db" d="M178 190 L198 184 M322 190 L302 184"/>
<path class="outline future-soft" d="M172 212 L186 214 L196 298 L178 303 L169 254Z"/>
<path class="outline future-soft" d="M328 212 L314 214 L304 298 L322 303 L331 254Z"/>
<path class="outline future-plate" d="M174 250 L189 249 L195 293 L179 298Z"/>
<path class="outline future-plate" d="M326 250 L311 249 L305 293 L321 298Z"/>
<path class="outline ceramic" d="M175 294 L198 294 L201 320 L181 330Z"/>
<path class="outline ceramic" d="M325 294 L302 294 L299 320 L319 330Z"/>
<path class="fine" stroke="#d5e0db" d="M178 270 L191 269 M322 270 L309 269"/>
<!-- helmet: shell, brow visor, comms puck, jaw/neck protection -->
<path class="outline future-plate" d="M218 106 Q220 73 250 63 Q280 73 282 106 L274 131 L226 131Z"/>
<path class="outline ceramic" d="M223 104 Q250 89 277 104 L274 117 L226 117Z"/>
<path class="outline future-edge" d="M228 119 L272 119 L268 132 L232 132Z"/>
<path class="outline future-soft" d="M230 131 L270 131 L274 148 L226 148Z"/>
<circle class="outline signal" cx="279" cy="112" r="5"/>
<path class="fine" stroke="#d5e0db" d="M250 69 L250 104 M236 137 L264 137"/>
<!-- W-75 carbine: receiver, barrel, optic, magazine, cable-free stock -->
<g transform="rotate(-28 310 313)">
<path class="outline future-plate" d="M300 293 L322 294 L329 318 L321 345 L304 339 L301 319Z"/>
<path class="outline ceramic" d="M306 279 L317 279 L320 296 L304 296Z"/>
<path class="outline future-edge" d="M309 265 L317 265 L318 280 L310 280Z"/>
<path class="outline future-plate" d="M316 294 L324 294 L341 439 L332 441Z"/>
<path class="outline ceramic" d="M308 329 L324 329 L323 357 L312 357Z"/>
<path class="outline future-soft" d="M301 337 L314 341 L319 367 L309 370 L298 349Z"/>
<path class="fine" stroke="#d5e0db" d="M320 307 L329 307 M328 392 L338 392"/>
<circle class="outline signal" cx="315" cy="303" r="3"/>
</g>
</g>
<path class="fine" d="M122 608 H378"/>
<text x="250" y="630" text-anchor="middle" fill="#625d52" font-size="12" font-family="Georgia, serif">fixed heel line — all equipment mounts to the same body rig</text>
</svg>
<div class="controls">
<input id="slider" type="range" min="0" max="200" value="0" step="0.1"
aria-label="Move through the three armour eras">
<div class="ticks" aria-hidden="true">
<span>1625</span><span>1939</span><span>2075</span>
</div>
<div id="label" aria-live="polite"></div>
</div>
<p class="caption">Drag slowly: the fixed shoulders, knees, heels and weapon-grip point do not move.</p>
</section>
</main>
<script>
(() => {
"use strict";
const eras = [
{
year: "1625 — Dresden, Electorate of Saxony",
description: "Blackened cuirassier’s three-quarter harness of iron and steel over buff leather; zischägge, cuirass, tassets, cuisses and poleyns; Pappenheimer wheellock pistol.",
short: "the 1625 Saxon cuirassier"
},
{
year: "1939 — Warsaw, Poland",
description: "Polish wz.36 wool field uniform, leather webbing and wz.31 pressed steel helmet; 7.92 mm Karabinek wz.29.",
short: "the 1939 Polish infantryman"
},
{
year: "2075 — Warsaw, Poland",
description: "M/75 modular composite cuirass ensemble: UHMWPE/aramid textile, ceramic strike plates and titanium fittings; W-75 6.8 mm cased-telescoped carbine.",
short: "the 2075 Territorial Defence soldier"
}
];
const slider = document.getElementById("slider");
const label = document.getElementById("label");
const groups = [
document.getElementById("era0"),
document.getElementById("era1"),
document.getElementById("era2")
];
function weights(position) {
if (position <= 100) {
const p = position / 100;
return [1 - p, p, 0];
}
const p = (position - 100) / 100;
return [0, 1 - p, p];
}
function render() {
const position = Number(slider.value);
const w = weights(position);
groups.forEach((group, i) => {
group.style.opacity = w[i].toFixed(4);
});
const exact0 = position === 0;
const exact1 = position === 100;
const exact2 = position === 200;
if (exact0 || exact1 || exact2) {
const era = eras[exact0 ? 0 : exact1 ? 1 : 2];
label.innerHTML =
'<span class="year">' + era.year + '</span>' +
'<span class="description">' + era.description + '</span>';
} else if (position < 100) {
const oldPct = Math.round(w[0] * 100);
const newPct = Math.round(w[1] * 100);
label.innerHTML =
'<span class="year">Between 1625 Dresden and 1939 Warsaw</span>' +
'<span class="description">The fixed figure is being re-equipped: ' +
oldPct + '% ' + eras[0].short + ', ' +
newPct + '% ' + eras[1].short + '.</span>' +
'<span class="between">Plate gives way to wool, webbing and a modern service rifle while the body rig remains unchanged.</span>';
} else {
const oldPct = Math.round(w[1] * 100);
const newPct = Math.round(w[2] * 100);
label.innerHTML =
'<span class="year">Between 1939 Warsaw and 2075 Warsaw</span>' +
'<span class="description">The fixed figure is being re-equipped: ' +
oldPct + '% ' + eras[1].short + ', ' +
newPct + '% ' + eras[2].short + '.</span>' +
'<span class="between">Wool and leather resolve into textile armour, ceramic plates and articulated protective shells.</span>';
}
}
slider.addEventListener("input", render);
render();
})();
</script>
</body>
</html>
The 2075 Warsaw ensemble is necessarily the shakiest historically because its institutional user, material package and W-75 carbine are invented. Its construction is deliberately conservative: textile armour under rigid strike plates, a collar, cuirass, segmented pelvic protection, knee cups and removable limb shells all have obvious ancestors in the first two eras. The anachronism I was most tempted by was powered exoskeleton legs; I omitted them because they would change the figure’s proportions, obscure the fixed body rig and turn protective equipment into an implausible film-machine.