Penrose Tiling Generator

An interactive, dependency-free Penrose tiling generator that runs entirely in the browser. Supports both classic Penrose tilings:

• P3 — Rhombi: thin (36°) and thick (72°) golden rhombi
• P2 — Kites & Darts

P3 · Rhombi	P2 · Kites & Darts

Running

Live at drewrey.github.io/penrose-tiling, or just open index.html in a browser. No build step, no server, no dependencies.

Initial settings can be passed in the URL, e.g. index.html?mode=P2&depth=6&palette=Ocean&edges=2.

Features

• Detail slider (1–9 deflation generations, tens of thousands of tiles)
• Palette presets plus a random-palette shuffle
• Adjustable edge width
• Drag to pan, scroll to zoom toward the cursor, double-click to reset
• Export the current view as PNG or SVG

How it works

Both tilings are generated by deflation: the plane is covered with Robinson triangles (golden triangles and gnomons, each half of a tile), and every triangle is repeatedly subdivided into 2–3 smaller ones using golden-ratio splits. Starting from a wheel of ten triangles around the origin, depth generations of subdivision produce the aperiodic pattern. Each tile (rhombus, kite, or dart) consists of two mirror-image triangles; the shared mirror edge is skipped when drawing outlines so tiles appear whole.

The math lives in penrose.js; the P3 subdivision rules follow preshing.com. Rendering caches the geometry as Path2D objects, so pan/zoom redraws stay fast even at high detail.

Testing

verify.cjs numerically validates the deflation rules:

node verify.cjs

It checks that every generation consists only of correctly-shaped Robinson triangles, that subdivision exactly conserves area, and that every interior edge skipped during outlining really is a mirror seam between the two halves of one tile.