Zen-Garden

A Zen rock garden in your browser: rake the sand with your mouse or your finger, place and move stones, and let the ripples form around them. No sign-up and no libraries.

• Rake the sand

What it does

• Rake: drag across the sand to rake grooves, with a rake of 3, 5, 7 or 9 tines. The rake goes around the stones.
• Size: a small, medium or large garden: more sand for the same rake and stones.
• Stones: click the sand to place a stone, drag a stone to move it, click one to remove it.
• Smooth: brush the sand flat again, or smooth it all at once.
• Ripples: rake the whole garden in the classic pattern, straight lines with rings around each stone.
• New garden: a new arrangement of stones, in odd numbers and uneven groups, never in the center, as in a karesansui.
• Save image: download the garden as a PNG.

How it is built

The sand is a height map: raking writes grooves into it, smoothing flattens it, and every grain is shaded from the slope of the sand, lit from the upper left, so the grooves look carved. The stones are drawn on a layer above, with their shadows on the sand.

Plain HTML, CSS and JavaScript (two canvases), with no dependencies and no build step. Just open index.html. The three color themes (dark, light and blue) are shared with my other projects (copied from omg-themes).

Zen-Garden is open source at GitHub with MIT license.

Had fun browsing the app? Buy me a coffee by becoming a sponsor.

You may also be interested in my other projects Enso-Maker (demo), Mandala-Maker (demo) and Tibetan-Singing-Bowls (demo). For more mystic arts as small web apps, see Esoterica.

Copyright (c) 2026 Olivier Giulieri.