← awwwards.skill

Demo 08 · real-time · Three.js

Florence · Santa Maria del Fiore

Nobody knew
how to close it.

The hole over the crossing was 45.5 metres across and started 52 metres above the floor. It had been left open for a generation, because the span was wider than any vault standing in Europe and there was no accepted way to build it. This page lays the courses that closed it, in the order and by the rules they were laid — and it only moves while you do.

Scroll to build

Uno · Quinto acuto

The profile is a rule, not a drawing

Each rib is an arc whose radius is four fifths of the span, struck from a centre one fifth in from the opposite springing. That is the whole specification. Feed it the documented span of 45.5 m and it returns a rise of 33.7 m on its own — which is what the dome measures. A pointed section leans on itself, so it pushes outward far less than a hemisphere of the same span would.

Due · Senza centine

There was no forest to hold it up

A vault this size was built on a centring: a timber dome, full size, holding every stone until the mortar set. For 45 metres that meant a scaffold nobody could source, pay for or trust. So the shell had to stand on the day each course was laid, wet, with nothing underneath it. Every rule that follows exists for that one reason.

Tre · Spinapesce

Every fifth brick stands on end

The herringbone. At intervals along each course a brick is set upright, spanning the bed above it, and the upright shifts sideways from one course to the next. It breaks the continuity of the mortar joints and gives the fresh bricks something to lean against, so a ring can be closed before it has any strength of its own. Look at the surface: the standing bricks are the ones stepping diagonally across the beds.

Quattro · Corda blanda

The courses are not level

The beds in the webs lie on cones coaxial with the dome, not on horizontal planes. A course therefore runs higher where it meets a rib and sags in the middle of each web, like a slack cord hung between two nails — which is what the masons called it. In this model the sag is 52 cm at the springing and closes to nothing at the eye. Once you have seen it you cannot look at the surface again without seeing the dip.

Cinque · Due gusci

Two domes, and sixteen ribs nobody sees

There is an inner shell and an outer one, and they are held apart. Twenty-four ribs stand between them: eight at the corners, under the white marble you can see from the square, and sixteen more inside the sandwich that were never meant to be looked at. The space they leave is the stair — the climb to the lantern goes up between the two domes.

Sei · Le catene

Rings, to stop it spreading

A dome pushes outward at its base, and masonry has no tension to answer with. So the shell is belted: sandstone beams about 43 cm in section, cramped end to end into an octagonal ring like a length of railway track — and, at one level, a chain made of chestnut. Timber, inside a dome of four million bricks.

Sette · 1436

The ring closes

Sixteen years of courses, and the opening in the readout counts itself down from 45.5 m to the six-metre eye the lantern would stand on. The cathedral was consecrated on 25 March 1436, with the dome shut and no lantern on it yet. Everything above this point belongs to men who had to finish somebody else’s sentence.

Otto · La lanterna

And then twenty-five more years

Brunelleschi won the competition for the lantern and died in 1446, a few months after it was begun. Michelozzo finished it in 1461; Verrocchio’s gilded copper ball went up on top in 1469. From the pavement to the cross is about 116 m, and it is still the largest masonry dome ever built.

How it is built

One number lays the whole dome

The shape is not modelled by eye. cornerRadius(y) is the quinto acuto arc — radius 0.8 × span, centre 0.3 × span in from the axis — and every other point on the dome is derived from it: the webs bow out from the chord between two ribs, the outer shell stands off the inner one by a gap that closes with height, and the ribs are slabs standing in that gap.

The courses are one function too. bedLevel(y, r) = y − 0.30 r is constant over a cone, so it answers “which course does this point belong to?” for any point in the masonry — and because a rib sits further from the axis than the middle of a web, the same course arrives higher at the rib. The corda blanda is that minus sign, and nothing else.

The build is a single uniform: the highest bed laid so far. Both shells, all twenty-four ribs and all four chains discard any fragment above it, so the dome rises course by course without a single vertex being touched, and the brickwork, the reveal and the readouts cannot disagree with each other — they are reading the same number.

The bricks are not an image. Bed and head joints, the half-brick stagger between courses and the upright bricks of the spinapesce are computed from where the pixel falls in the masonry, in metres, and fade out when a course gets smaller than a pixel. There is no texture, no model and no photograph anywhere in it: the page is 23 KB of its own code, and the rest of the weight is the renderer.

Measured, live

What the frame costs

Read off the renderer while you look at it.

Draw calls
Triangles
Textures
Programs
Model & texture bytes
0
Frame

Four surfaces carry the whole scene: two shells, the structure between them, and the city underneath. Everything else — the pattern, the depth, the light, the haze — is arithmetic in a fragment shader. The renderer is fetched after the first paint rather than before it, because the writing does not need it and the measurement said so.

The numbers

What is documented, and what this model chose

The first block is measured by other people. The second is a drawing decision, and it is marked as one.

Inner span, corner to corner
45.5 m
Outer span
54.8 m
Springing, above the floor
about 52 m
Profile
quinto acuto — radius = 4/5 of the span
Rise the rule returns
33.7 m
Ribs
24 — 8 at the corners, 16 in the webs
Bricks
more than 4 million
Weight lifted
about 37,000 tonnes
Built
1420–1436
Lantern
begun 1446, finished 1461
Ball
Verrocchio, 1469
To the cross
about 116 m
Cone slope of the beds
0.30 — chosen, not published
Sag it produces
52 cm at the springing
Course height
52 cm — a drawing convention
Eye of the dome
6 m — approximate
Shells
drawn as surfaces, without their thickness
City below
massing for scale, not a survey

Sources for the first block: Museo Galileo on the dome structure (the quinto acuto rule, the weight, the brick count), Wikipedia’s Florence Cathedral (dates, ribs, herringbone, the sandstone chain), and the Opera del Duomo for the 45.5 m and 54.8 m spans. The rule and the span agree with the measured rise to within a metre, which is the only check available here and the reason the profile in this page was derived rather than traced.

Colophon

Credits, and what this is not

Shape
Derived from the quinto acuto rule at the documented span
Courses
Cones, coaxial with the dome — the corda blanda
Brickwork
Computed per pixel, including the spinapesce
Assets
None. No models, no textures, no images — three.js is the only dependency
Renderer
Three.js r185, four surfaces, custom shaders
Type
System stacks only — no webfont

This is a diagram of how the dome works, not a survey of the building. The proportions come from published dimensions and the two construction rules are the documented ones, but the courses, the ribs and the chains are placed by a program written from reading, not from measurement on site — and Florence below is massing for scale. Where a number was a choice rather than a source, it is in the second table above.

Read the method →