Site 05Website · Draft, in progress2026

BagerietB

A sourdough bakery by Skjolds Plads in Nørrebro. Their own heart-B logo ends the name, and the first scroll tears the page along the score on their loaf.

Open the site (opens in a new tab)work.draindk.tech/bageriet-b

Client
Bageriet B, Haraldsgade 5, Copenhagen
Sector
Food and drink
Role
Design and development
Year
2026
Deliverables
Website in Danish, Their logo, redrawn from the notice on their door, The Ø-mærke, from Fødevarestyrelsen's own file, A hero that tears along the score, Open now, from Copenhagen's clock, Press, hours and directions
Tech
HTML, CSS and JavaScript · Python: fontTools, Pillow, shapely

The brief

Bageriet B is a sourdough bakery on Haraldsgade, on the corner of Skjolds Plads in Nørrebro. The Guardian, ELLE and ALT.dk have all written about it, and its own site has one photo, of a loaf. This one is a draft. The bakery has approved it, but I'm not finished with it yet, so it runs here on my site rather than at their own address.

The approach

Everything hangs on one line: the knife's score on their loaf, at 17 degrees rising to the right. The page opens on the loaf itself, turned so its score lies on that line, and the first scroll tears the yellow sheet along it to show what they bake underneath. The phone menu opens along the score, and the hours card is a slice with it as its top edge. The B at the end of the name is the red heart from their own logo, redrawn from the notice on their door, and the organic Ø on the same notice gets a section of its own. The colours come from the corner: the awning's yellow, the door's green-black and the crumb's cream. It's plain HTML, CSS and a little JavaScript with real photographs only, about 0.75 MB on a phone.

  1. The bakery's site on a phone: Bageriet in black on yellow, ending in a red heart with a B in it, over a dark, floured loaf.

    01 / 06

    The score

    Their loaf, from the one photo on their own site, turned so the knife's score lies at 17 degrees. The name ends in the heart from their own logo, in the red of the notice on their door.

  2. The yellow page torn along a slanted line through the loaf, with the cream page underneath showing through.

    02 / 06

    The tear

    The first scroll tears the yellow sheet along the score. The upper leaf hinges up off the right end, the lower one drops off the left, and what they bake shows through in the crumb's cream.

  3. Det vi bager: sourdough bread, sourdough buns, croissants and coffee listed on cream, with the bread rack below.

    03 / 06

    Det vi bager

    What they bake, in the words the press used: The Guardian sends people for the croissants, ELLE called the surdejsboller worth the wait. Beside it, the rack behind the counter. No prices: those come from the owners.

  4. Økologisk on cream under the big red Ø-mærke.

    04 / 06

    Økologisk

    The red Ø stands on the notice in their door, so it gets the cream to itself, big. It's Fødevarestyrelsen's own file, converted rather than redrawn, and used the way their rules allow on a sign or in marketing.

  5. Haraldsgade 5 on yellow, over a photo of the bakery's brick corner with people on yellow chairs outside.

    05 / 06

    Haraldsgade 5

    The corner of Skjolds Plads in TAKT's photos: the awning and chairs the page takes its yellow from, the flour sacks in the window, the long tables inside.

  6. Kom forbi on green-black: the address, a Google Maps button and the hours on a yellow card with a slanted top.

    06 / 06

    Kom forbi

    Open or closed is worked out from Copenhagen's clock and the hours. It shows in the bar, the hero, the menu and here, on a card cut along the same line, with today's row marked.

Open the sitework.draindk.tech/bageriet-b (opens in a new tab)

Under the hood

Measured 18 October 2026, Chrome on a MacBook Pro

Triangles a frame
0
None, by choice: the tear is the bakery's own photo of the loaf, cut in two along its score and moved by the scroll. HTML and CSS.
Download
2.2 MB
0.9 MB to open the page, 2.6 MB on a phone.
Slow phone
60 fps
95 % of frames under 16.8 ms, on a phone screen with the CPU slowed four times. There the case shows a film of the site.
Without JavaScript
The loaf stays whole and the page reads top to bottom. With motion off it does the same.

Index 15 projects