Catalogue / Plate 13← All plates

Drawn on the plot, then built through the drawing

An architect's drawing is pen-drawn onto a plot, then built through the lines.

13 / WebGL · scroll

An empty building plot between two brick semi-detached houses, pegged out with a string line.

As the page scrolls, an architect's front elevation draws itself onto the empty plot: the ground line, the walls, a steep gable, the windows, then dimensions, levels and material notes. The house then rises through the drawing: a brick ground floor in courses, dark timber boards on the upper floor, a slate roof, then the glazing, a block-paved drive and a lawn. The finished house is a visualisation.

Sampleton HomesPlot 3 · The plot

Drawn first. Built through the drawing.

Scroll to build it, or press play. Rest the pointer anywhere to see the drawing there.

pictures decoded … · drawn 0% · built 0%

Remake it

Build one interactive web page: Scrolling draws an architect's front elevation onto an empty plot, the pen moving along every line, then builds the house up through the drawing the way a house goes up: brick in courses, the cladding a board at a time, slates from the eaves to the ridge, then the glazing, the drive and the lawn. Wherever the pointer rests, the drawing rises back through whatever stage the build has reached.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A new build or a development: a plot with planning, a self-build, a housebuilder's show home, an extension. Anything whose story is drawing, then making. Do not let it fail the way this kind of piece usually does: A drawing that does not match the building, or a render passed off as built. Here every line is measured off the built picture, so the elevation lands on the house it describes; a 'Visualisation' label shows whenever the house is on screen; and the neighbours and the street never change, because only the plot is ever replaced.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.
Notes: when it suits, when it does not, how it fails
When it suits
A new build or a development: a plot with planning, a self-build, a housebuilder's show home, an extension. Anything whose story is drawing, then making.
When it does not
A finished property with no making to show, or a buyer who wants the photographs and the floor plan without a scroll.
How it fails
A drawing that does not match the building, or a render passed off as built. Here every line is measured off the built picture, so the elevation lands on the house it describes; a 'Visualisation' label shows whenever the house is on screen; and the neighbours and the street never change, because only the plot is ever replaced.

Measured on: landonorris.com · T10 · landonorris.com · T11 · An era residence · E5. Built from scratch for an invented business; nothing here comes from the site studied.