Drawing
with song.

Rossignol treats bioacoustics as an alternate civic survey. The fictional city of Bellweather is plausible enough to hold real research patterns: urban birds may raise song amplitude in noise, change frequency use where low bands are masked, and redistribute singing into quieter hours. Rather than making those findings a detached chart, the page makes them spatial. A phrase is a road, a duet becomes a border, and the quiet between freight movements is rendered as inhabitable room.

The emotional register belongs to Wing VII: dark but tender, with sodium light suspended over rooftop slate. There are no generated images. Every street, heat tile, sonogram and dawn flare is HTML, SVG, or CSS, proudly using the browser itself as the instrument.

The large atlas is built from inline SVG in index.html. In main.js, buildAtlas() turns a small station dataset into focusable recording posts and assigns a distinct Bézier phrase to each. scrubTrace() reads pointer position across the SVG and converts horizontal distance into visual frequency. If—and only if—the visitor enables sound, tone() renders a brief oscillator sweep through Web Audio.

selectStation() keeps the map and field-note panel synchronized. The replay control restarts a stroke-dash animation and a bright scanning needle, so the phrase can be read without audio. Dashed shapes beneath the routes are not municipal boundaries; they are territories inferred from countersong overlap.

The masking demonstrator is the central physical metaphor. updateMasking() normalizes the slider’s 22–72 dBA range, lifts a shaped orange noise field, translates phrase contours upward, increases their stroke weight, and advances the displayed onset time. Those movements correspond to pitch, loudness and timing responses without claiming to predict any individual bird. When the response crosses low, adaptive, or high masking, triggerCityAnswer() fires a brief field of cartographic rings and a live typographic verdict: Bellweather visibly answers its own noise.

The 02:00–04:00 heat field uses CSS custom properties to mix park green-black with sodium amber. enhanceHeatMap() turns all thirty samples into focusable readings, moves the time scanner to the chosen column, and writes district-specific dBA and clearance notes into the adjacent ledger. In the finale, buildDawn() plots posts by longitude while updateDawn() compares each to a threshold, lighting them east-to-west as the visitor moves time.

Crimson Pro supplies the large, slightly fragile editorial voice; its italics carry wonder without becoming ornamental. Space Mono is reserved for coordinates, timestamps, station IDs and sonogram readouts. Both are self-hosted from the exhibition font library.

Texture comes from a tiny inline SVG turbulence filter, layered transparently above the page. Glows are used only as biological signals—never as generic decoration—and hairline borders keep the dark fields cartographic.

Ask an AI coding agent for a code-only urban ecology story built as a sequence of interactive instruments, not a landing page. Give it one dominant nocturnal field, one signal color, an editorial serif and a technical mono. Specify that its primary SVG must derive meaningful geometry from a small dataset, that every audio cue must have a visual equivalent, and that audio starts off.