An isometric street where the road loops

What it is

Fig 12 in my series of isometric line drawings. A city block seen from above at an angle: a bank from 1921, a donut shop that is open late, and a police precinct, all on Elm Street. Press Space or click the bank, and a robber runs out with a bag of money, jumps in the getaway car and drives off. Two officers drop their donuts and chase him around the block. Every lap, the cruiser gets a little closer. Then the arrest, the drive back, and the booking.

You can also send someone on a donut run, turn on auto heists, and switch the street lights.

Why I made it

I had built single objects in this style, a kitchen timer and a drawbridge. I wanted a place with a story in it. Not a game you win, a scene that plays out, with a few buttons to start things. The donut joke gave me a reason for the officers to be slow at the start.

How it is built

Everything is SVG drawn from strings by a small isometric kernel: a function that maps a 3D point to the page at 30 degrees. Buildings, cars and people are all plain paths. There is one street layer that is sorted by depth every frame, so a car behind a lamp post is drawn before it.

The key trick is the loop. From the code: “Elm Street wraps at the edge of the plinth: whatever drives off the right end comes back in from the far left. The cruiser is a little faster than the getaway car, so every lap closes the gap.” The street is 320 units long. The getaway car drives at 56 to 61. The cruiser drives at 63. That small difference is the whole chase.

The story is a task runner. A tiny system runs “sequences of steps, several at once”. A heist is one sequence: robber out, one getaway lap, donuts dropped, chase, arrest, drive back, booking. The donut run is another. They can overlap, and the readout tells you the phase: “chase · lap 2 · gap 1.4 cars”.

Bills fly out of the car window, up to 40 of them. Dropped donuts bounce once.

Design decisions

• Greys and one accent. The plate is grey. One accent colour lights the lamps, the windows, the siren, the donuts and the money bag. A darker tone is for the uniforms and the getaway car. Nothing else gets colour, so your eye goes to what matters.
• The plinth tells the rule. The text on the base says “THE ROAD LOOPS AT THE PLINTH EDGE”. The world explains itself.
• Four lamp colours. Sodium, halogen, mercury and neon, shared with the other isometric pages and saved in your browser.
• Dark mode follows the system. Reduced motion stops the blinks and the glow fades.
• A clickable building gets an accent stroke when you hover it, so you know it does something.
• Civilian traffic keeps flowing the other way, up to four cars, a quarter of them vans, so the street never looks empty.

Small details

• The signs: “HOLLOWAY SAVINGS · 1921”, “DONUTS · OPEN LATE” under a sprinkled rooftop donut, and “BUS 7”.
• The box on the bench shows how many donuts are left as tiny rings. An officer takes a bite every 4.5 seconds. An empty box sends someone for more.
• The bank alarm blinks during a heist. The siren lights alternate six times a second.
• The getaway car wobbles in its lane after the first lap, like a driver who is getting nervous.
• The robber has a mask and stripes. The officers have a badge dot.

Numbers

Scale 1 to 150. Loop 320 units. Getaway speed 56 to 61, cruiser 63. Up to 40 bills. The box holds four donuts and is refilled to six. An auto heist starts three seconds after the street goes quiet.

What I learned

A good loop is better than a big map. Because the street wraps, the chase can go on as long as it needs, and the gap closing a little each lap is a story by itself. I did not write the ending. The speeds did.