Svelte + D3: Phyllotaxis layout

100%

Svelte + D3: Phyllotaxis layout

✓ Published3🌍 Public

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Svelte + D3: Generation of a phyllotaxis layout

A spiral of 1,000 circles is rendered sequentially, each positioned by a phyllotaxis layout using the golden ratio. The animation progressively reveals circles while drawing a connecting spiral path through their centers. Circle colors come from D3’s `scaleSequential` with `interpolateWarm`, and the layout is generated by a custom `layoutPhyllotaxis` function. The SVG and animation are built with Svelte’s reactive `$:` blocks and `each` loops, updating at set intervals.

MMatthias Stahl

96% match

Loading thumbnail…

Svelte + D3: Phyllotaxis layout (irrational 3)

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.

MMatthias Stahl

95% match

Loading thumbnail…

Svelte + D3: Phyllotaxis layout (irrational 2)

A generative arrangement of 1000 circles follows a phyllotaxis spiral, offset by an irrational angle derived from 1+√2. Each circle is colored with a warm sequential scale from D3, and the innermost circle briefly turns transparent in sequence via a timed activeCircle index, creating a wave-like fade. Rendered as SVG within a Svelte component, the layout is computed by a custom `layoutPhyllotaxis` function using D3’s `scaleSequential` and `interpolateWarm` for color mapping, with smooth CSS transitions animating the opacity changes.

MMatthias Stahl

94% match

Loading thumbnail…

Svelte & Buddha Art

A spiraling phyllotaxis layout of 1,000 Buddha silhouettes demonstrates Svelte's reactive rendering and SVG animation capabilities. Each path shape uses d3's `scaleSequential` with `interpolateWarm` for a gradient from gold to deep orange. An active circle sequentially reveals each silhouette by toggling its fill opacity via `setInterval`. The layout algorithm uses a custom `layoutPhyllotaxis` function with the irrational³ angle and square-root scaling to create a golden-angle-inspired distribution.

NNita

81% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This example shows a collection of six semi-transparent circles scattered across a warm orange-tinted background, each positioned by explicit x and y coordinates with varying radii and shades of blue. The circles are rendered as SVG elements within a 1000x500 viewport, using Svelte’s `{#each}` block to iterate over the static dataset defined in the component’s script. The visualization relies on Svelte’s reactive template syntax for declarative SVG attribute binding, while D3 is imported as a dependency but not actively used in this code. The circles are given a uniform opacity of 0.7, creating subtle overlaps that hint at layered relationships between the points.

SSafrin La Batu

80% match

Loading thumbnail…

Responsive Svelte Starter

This example demonstrates responsive SVG rendering with Svelte, showing six colored circles at varied positions and sizes that scale dynamically with the viewport. The visualization uses d3.scaleLinear to map data coordinates to pixel positions, while Svelte's bind:clientWidth and bind:clientHeight are used to track container dimensions. The circles are rendered with Svelte's each block, with opacity controlled via inline CSS calc. The dense dot pattern creates a colorful abstract composition that adapts to any screen size.

CCurran Kelleher

80% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This gallery example presents a set of colored circles scattered across a 1000x500 SVG canvas. A Svelte component iterates over an array of JavaScript objects, each containing x, y, radius, and fill color values, to render `<circle>` elements with a semi-transparent orange background. The visualization uses the Svelte `{#each}` block to map data to SVG shapes, with styling applied via CSS to achieve a 0.7 opacity level, demonstrating a minimal integration of D3 data structures within the Svelte framework.

CCurran Kelleher

79% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This example visualizes a small dataset of six circles, each positioned with explicit x and y coordinates and varying radii, to create a non-interactive scatterplot-like composition. The data is hardcoded in the Svelte component, and the circles are rendered as SVG elements via an `{#each}` block. The visualization uses a warm translucent orange background with semi-transparent circles, layering them to show overlaps and depth. It relies on Svelte’s built-in templating and styling, with no D3 API calls present, though the project is set up to import D3 as a dependency. The rendering approach is direct SVG manipulation through Svelte’s reactivity.

SSafrin La Batu

78% match