How this site was drawn

01

The brief, as received

A small architecture practice presented drawings first: plans, sections and elevations as hand composed SVG line work, never renders, never photography. The house move had to be architecturally true: section cuts draw in red, the single saturated stroke doing the drawing's actual job as cut plane fills, not decoration. Field charcoal #1a1c1e, bone linework #e9e4d8, section red #e03d2d. Bricolage Grotesque and Martian Mono. Register chambers: pattern at scale, the quiet page.

The operator bound two further documents to the build. His fragments: generative architectural sketches, wabi sabi algorithms, rustic nano tech, with the clarification that the drawings are hand authored but LOOK generative, architecture that nature herself renders in the rocks and strings. And a drawing register distilled from his second Cosmos set: precision dissolves into gesture, annotation clouds are texture, construction geometry stays visible, graphite and ink coexist, the accent works as fills at structural moments, plates carry scientific captioning, and at most one or two dark computational plates.

Every coordinate in every drawing on this site was placed by hand. No randomness was rolled. The generative look is authored, which is the point: hand drawings that look like what drawing machines dream.

02

The drawing system

Ten project plates, one hero plate and six settlement parcels share a five stroke vocabulary defined once in the layout: .s hairline ink, .s2 heavy ink, .g graphite (wider, softer, drawn first), .c construction, and .r/.rf section red as stroke and fill. All strokes use vector-effect: non-scaling-stroke, so a plate keeps its hairlines at any size, the way an instrument diagram does.

Plates assemble on scroll with zero islands. One inline script stamps each drawable stroke with a normalised pathLength and a stagger delay, then an IntersectionObserver adds one class. Everything else is CSS:

// the whole client runtime, from Layout.astro
const strokes = p.querySelectorAll('.d');
const n = Math.max(1, strokes.length - 1);
strokes.forEach((s, i) => {
  s.setAttribute('pathLength', '100');
  s.style.setProperty('--d', Math.round((i / n) * 1500) + 'ms');
});

/* and the CSS that does the drawing */
@media (prefers-reduced-motion: no-preference) {
  html.js .plate .d { stroke-dasharray: 100 100; stroke-dashoffset: 100; }
  html.js .plate.in .d {
    animation: pl-draw 1.15s cubic-bezier(0.6, 0.01, 0.18, 1) forwards;
    animation-delay: var(--d, 0ms);
  }
}

The default state is the finished drawing. No JavaScript, reduced motion, print: all of them get the completed plates, because the animation is applied only under html.js and no-preference. Ink draws first, red fills arrive after the ink, annotations settle last, which is the order a real drawing is made in.

Content is a typed Astro collection: each project entry carries its siting, program, area, status, scale, north rotation and plate captions as data, with the narrative as markdown. The line work lives in components, keyed by entry id, so a client can edit every word of a project without touching a drawing.

03

Critique passes

Pass 1

Found: the construction stroke class never declared fill none, so every faint compass circle rendered as a solid black disc over its plate; SVG labels outside the base annotation class fell back to the browser's 16 pixel default and shouted across the dark terrain plate; the reservoir section's red poché formed a closed loop and read as a red wireframe building instead of cut material. Changed: the stroke vocabulary hardened, a base font size set for all plate text, and the station's red broken by its window and door openings so red is only where the plane cuts solid. Upgrade: an archival stamp block, drawn by hand, not a render, on every archive sheet.

Pass 2

Found: the exploded axonometric collapsed into floating diamonds at page scale, its gaps too large for its members; plates with narrow drawing sheets rendered their annotations oversized at full column width; the hero's left margin labels collided with the north wall; the mobile headline broke ragged on its forced line break. Changed: the axonometric redrawn on tighter axes with a hatched plinth and anchored yard line, every narrow plate given an intrinsic sheet width so annotation scale holds across the archive, labels shortened, the break suppressed under 700 pixels. Upgrade: pointing at a settlement parcel sets its red section marker marching, the knife moving along the cut.

Pass 3

Found: two drawing sets contradicted their own narratives. The paper archive promises red twice in the whole set and delivered it on every wall; the chapel plan promised one red line the width of the wall and drew a full red ring. Also caught: axon leaders striking through their own label tails, and a rotated dimension label colliding with the wall build up leaders. Changed: red discipline enforced, with ink hatch poché carrying every cut the copy does not give to red; leaders re anchored. Upgrade: the one sanctioned ghost display, a cropped section mark AA at four percent opacity behind the method.

04

Colophon

Stack

Astro, static output, zero client islands

Client JS

One inline script, 24 lines, observer and stagger only

Type

Bricolage Grotesque and Martian Mono, via Google Fonts

Drawings

17 hand composed SVGs, no generative randomness

Dark plates

One, the reservoir terrain study, as sanctioned

Back

To the practice index