Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Svelte + D3: Phyllotaxis layout (irrational 3)

Public visualization

Viewing a saved revision (read-only)

e787605f3f5d4183aff5c3494fdb551a

Svelte + D3: Phyllotaxis layout (irrational 3)

0 stars1🌍 Public
MMatthias Stahl
Last edited Nov 26, 2025
Created on Feb 10, 2024

This example shows a phyllotaxis layout of 1000 circles, arranged in a spiral pattern and colored with a warm sequential scale. An animated circle cycles through the layout, temporarily becoming transparent. The Svelte component uses D3’s `scaleSequential` and `interpolateWarm` for coloring, while a custom `layoutPhyllotaxis` utility calculates positions using the irrational number (9 + √221)/10 for angle spacing. Circles render as SVG elements with a CSS transition on opacity, creating a pulsing highlight effect.

AI-generated description