The same soldier

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

1. 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.
2. 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.
3. 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.
4. Date the weapon too. It must belong to the chosen period and place.
5. 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, , cookies, or .