Phyllotaxis Spiral
Golden angle spiral with Fibonacci lattice connections.
What is Phyllotaxis Spiral?
Phyllotaxis Spiral places points on a Vogel spiral: each point takes a fixed radial step from the centre and turns by the golden angle, 137.508 degrees, which is what produces the sunflower packing where no two points ever line up into rows. Points are then connected to their neighbours in the Fibonacci lattice, so the spiral draws itself as a mesh instead of a scatter. Point count, 500 to 5,000 with 2,000 as the default, and spiral tightness are the two live parameters, and every point is filled with a radial gradient so density reads as brightness. Canvas 2D, so the cost scales with point count rather than with pixels. It survives being turned down hard, which makes it usable on weaker devices where a full-screen shader would not be.
Phyllotaxis Spiral is a free Canvas 2D web effect in the TappyPrism library. Golden angle spiral with Fibonacci lattice connections. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (phyllotaxis.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Point Count, Spiral Tightness — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Point Count | MAX_POINTS | 500 – 5000 | 2000 |
| Spiral Tightness | SPREAD | 0.003 – 0.015 | 0.0065 |
How to add Phyllotaxis Spiral to your page
- Download the standalone file phyllotaxis.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/phyllotaxis.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Phyllotaxis Spiral"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'MAX_POINTS', value: 2000 }, '*');
Frequently asked questions
What is Phyllotaxis Spiral?
Phyllotaxis Spiral places points on a Vogel spiral: each point takes a fixed radial step from the centre and turns by the golden angle, 137.508 degrees, which is what produces the sunflower packing where no two points ever line up into rows. Points are then connected to their neighbours in the Fibonacci lattice, so the spiral draws itself as a mesh instead of a scatter. Point count, 500 to 5,000 with 2,000 as the default, and spiral tightness are the two live parameters, and every point is filled with a radial gradient so density reads as brightness. Canvas 2D, so the cost scales with point count rather than with pixels. It survives being turned down hard, which makes it usable on weaker devices where a full-screen shader would not be. Phyllotaxis Spiral is a free Canvas 2D web effect in the TappyPrism library. Golden angle spiral with Fibonacci lattice connections. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (phyllotaxis.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Point Count, Spiral Tightness — adjustable in the browser or at runtime.
How do I add Phyllotaxis Spiral to my website?
Download the standalone file at https://prism.tappypotato.com/fx/phyllotaxis.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/phyllotaxis.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Phyllotaxis Spiral"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'MAX_POINTS', value: 2000 }, '*').