Isometric harbour city, generated in pure SVG

Build a generator that draws a fictional harbour district in isometric projection as inline SVG, with no canvas and no WebGL. The city must be reproducible from a seed string, which is the main correctness test: two runs with the same seed must produce a visually identical result. Decide the file layout yourself.

Geometry

1. A true 2:1 isometric projection (world to screen written by you, documented in a comment with the derivation), where a unit cube draws as the classic hex silhouette with no seams between faces.
2. A district grid of about 18 by 18 cells containing: quays and water, four block types (warehouses, terraced housing, a market hall, a crane yard), roads with zebra crossings, a shingle beach, and a breakwater carrying a lighthouse drawn once as a reusable <symbol>.
3. Painter's algorithm depth sort that is actually correct: a tall building behind another must not draw over it, and rotating the camera through four azimuths must not break any occlusion.
4. One light direction. Every face gets its value from the same rule, so the shading reads as one scene, and no face is a flat unlit grey.
5. At most a handful of gradients, and only where light genuinely falls. Roof texture from SVG <pattern> and <defs>, not from hundreds of tiny rects.

Generation

• A hand written PRNG (mulberry32, xorshift or your own) plus value noise or a small constraint pass for the block layout. No Math.random() anywhere, since it breaks determinism.
• Seed in the URL hash so a view can be shared and reopened identically from disk.
• Buildings composed from a small vocabulary of parametric parts (base, roof, chimney, dormer, sign, awning), with variation that stays plausible: roof pitch, window count and cornices driven by the seeded stream.

Interaction

• Pan, zoom (from a favicon-scale overview to a single building close up, with detail that appears as you zoom rather than just bigger shapes), and rotate the azimuth with keyboard shortcuts.
• Hover highlights a footprint and its outline; click opens a small dossier (name, year built, use, current occupant) drawn from generated data that stays consistent per seed.
• A time of day control that moves the light direction, changes the sky ramp, and switches on window lights after dusk, with lights chosen from the seeded stream so they do not flicker.
• A minimap that shows the viewport rectangle and is clickable to jump.
• A toggle to reveal the underlying grid and generator cells, which is a quick check that the generation is real and not hand placed.

Performance and craft

• Build the scene as one SVG document, reuse geometry through <use>, and keep total node count under about 4000 by measuring and reporting it.
• Pan and zoom via a transform on one group so there is no layout thrash, and it stays fluid on a mid range 2024 laptop.
• Nothing may be hardcoded per instance: if you write 200 similar path strings by hand, you have failed the generation part.

Before you finish, add a short How it works section that a stranger could follow: the projection formula, the depth sort rule, the seeded pipeline, and the node count you measured. Then mark each numbered item DONE or NOT DONE with reasons.

Use documentation and search the web with donsetch for SVG details you are not certain about, especially patternUnits, transform ordering, and how browsers sort <use> instances.