Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Svelte + D3: Phyllotaxis layout

Public visualization

Svelte + D3: Phyllotaxis layout

2 stars3🌍 Public
MMatthias Stahl
Last edited Nov 26, 2025
Created on Feb 10, 2024

A phyllotaxis layout arranges 1000 circles in a golden-angle spiral, with each circle colored by its index using a D3 sequential scale and the warm interpolator. An animated sweep highlights circles one by one, fading the active circle’s fill via a `setInterval` that updates a reactive Svelte variable. The layout is computed by a custom utility function using the golden ratio, while rendering uses SVG circles with CSS transitions for smooth opacity changes. The example combines Svelte’s reactivity and D3’s color scales for a simple, rhythmic visualization.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed