Koi Pond Garden: 20 koi in one HTML file

Twenty koi glide through water you can actually see through — real reflection, refraction, caustics, light absorbed with depth. An arched bridge, a pavilion, a rock waterfall, sakura, a maple, a bamboo grove, sacred lotus, water lilies, stone lanterns, distant mountains. A frog that leaps when you click it. A turtle sunning on a rock. Dragonflies darting over the surface. It is a Japanese garden, and it lives in one HTML file.

Koi Pond Garden renders in real time in the browser: 20 fish across 18 real varieties — Kohaku, Sanke, Showa, Ogon, Asagi, Tancho, butterfly long-fins, Gin Rin sparklers — each with procedurally generated scales, patterns and fins, in small, medium and jumbo sizes. The water is a live ripple simulation plus Gerstner waves with caustics and Beer–Lambert absorption.

You can feed the koi: a first-person hand reaches in and sprinkles food, and the fish crowd and jostle. You can stroke them: a fish swims up to your hand. Press C for a cinematic film tour that flies through the whole garden, above and below the water. Press T to change the weather and the seasons — sunny, rain, autumn, snowy winter, each with matching light, fog and water. Press O to freeze time.

The sound is synthesized — water, leaves, the waterfall, a bamboo shishi-odoshi knocking — all Web Audio API, no recordings. The geometry is generated from curves, noise and instancing at runtime. The textures are drawn into canvases in code. The water, lighting, shadows, caustics and depth of field are custom GLSL shaders on the GPU. There are no .png, .glb, .mp3 or font files anywhere — the whole thing is one ~560 KB text file, so anyone can open it and read exactly how any part works.

The prompt that built it is in the repo too: a one-shot specification you can paste into a fresh session and rebuild a garden like this yourself. https://github.com/souranyp-stack/koi-pond-garden

■ Filed from The Foundry: the tools wing of the city.