One description, three readings
A dieline is an unusual kind of drawing. It is a picture, a set of instructions for a machine, and a description of an object that does not exist yet — all in the same marks.
Printers keep those three readings in separate files: artwork here, cut file there, a render for the client somewhere else. They drift. The version that got cut is not quite the version that got approved.
This piece collapses them. There is one geometry. Folded, it is the object. Flat, it is the drawing. Exported, it is the instruction. Change the description and all three change together, because there is only ever one of them.
Thirteen divs, hinged the way board folds
There is no 3D library here and no canvas. Every panel of the carton is a plain element, and each is positioned as a child of the panel it folds off — front, then the side off the front, then the back off the side, then the left, then the glue flap. Tuck, dust and bottom flaps hang off their own walls.
That nesting is not a convenience. It is the same parent-child chain the board has: fold the front and everything attached to it comes along. Because the browser already composes nested transforms, the hierarchy does the work that a scene graph would otherwise have to.
The drawing above is not a screenshot. It is the same thirteen rectangles and twelve crease segments the carton above uses, drawn from the same numbers the exporter reads — which is the whole argument of the piece, made once in miniature.
One number closes the box
A single progress value from 0 to 1 drives everything. Each hinge turns from its flat angle to its finished one — 90° for a wall, −90° for a flap, −105° for the tuck that goes past vertical and into the box.
Hinges do not all move together. Each lags by how deep it sits in the chain, so the carton assembles outward-in the way hands would do it: the front comes up, then the side, then the back, then the flaps fold over what is already standing. The lag is one term in one line of arithmetic, and it is the difference between a box inflating and a box being built.
Light without lighting
With no renderer there is no shading, and an unshaded white box reads as a flat shape. Rather than tint each face's own colour — which would fight the paint tools — every panel carries a transparent black overlay whose opacity is set by which way that face ends up pointing. Front clear, back a whisper, sides a little more, flaps most. The form survives being painted any colour, or having a photograph wrapped over it.
The sheet accepts print
Under the carton is a strip of inks. Choosing one and clicking a panel fills it; a fill-all button floods the box. Because the shading is an overlay rather than the panel's colour, a red carton still catches the light.
Uploading an image does something more interesting than stamping a picture on the front. The image is sized to the whole flat sheet once, then each panel takes it at that same size with its own offset — so the artwork is registered across the net exactly as a printed sheet is, and when the box folds, the picture wraps the corners because it was never divided in the first place.
The same geometry, written for a machine
Everything above is a toy. The button marked .DXF is what makes it a study.
DXF is a plain-text CAD format, old and stubborn and universally readable: a list of entities, each one a stack of numbered group codes. Writing one needs no library — a few hundred bytes of string building.
Step 3 is the one that matters. A naïve export draws every rectangle and hands the machine a file where every interior wall is cut twice — which would cut the carton into thirteen loose pieces. Splitting each edge around its creases is a few lines of interval arithmetic and the difference between a file that looks right and a file that is right.
What comes out
| Property | Value |
|---|---|
| Size | 3,196 bytes — 744 lines of plain text |
| Entities | 46 LINE |
| Layers | 34 on CUT, 12 on CREASE |
| Extents | 0 → 20.48 in wide, 0 → 10 in tall |
| Units | inches, at 25px = 1 in |
| Dependencies | none — built with string concatenation |
The first entity in the file is the crease between the front panel and the right wall — a vertical line at 6 inches, running from 7.52 down to 2.32:
0 SECTION 2 ENTITIES 0 LINE 8 CREASE 10 6.0000 ← x1 20 7.5200 ← y1 30 0.0 11 6.0000 ← x2 21 2.3200 ← y2 31 0.0 … 45 more entities … 0 ENDSEC 0 EOF
That is a real carton. 6 inches between creases is the front panel width; 5.2 inches of travel is the box height. Open the file in Illustrator and the layers arrive named, the cut lines are cut lines, and the dimensions are the dimensions. Nothing was traced, measured or redrawn — it fell out of the same description that folds the toy.
Download the exported dieline — 3,196 bytes, or press .DXF above and make your own.
The drawing was never separate from the thing
The interesting part is not that a browser can fold a box. It is that the distance between a thing you play with and a file a machine can cut turned out to be about forty lines of arithmetic.
Design work has spent a long time treating those as different disciplines with different tools and different file formats, mediated by people who translate between them. Most of that translation is not judgement. It is bookkeeping — and bookkeeping is exactly what a computer will do for free if the description is honest enough to be read more than one way.
What this piece tests is whether a single description can carry all the way from something a visitor pokes at to something a flatbed cutter will accept. It can. The version you folded and the version that gets cut are the same version, because there is only one.
Which suggests the useful question is not whether the tools can do this. It is which other pairs of "separate" artefacts are actually one description wearing two hats.