Skip to main content
SimilarExport ZIP
100%

Svelte + D3: Phyllotaxis layout (irrational 2)

✓ Published1🌍 Public
MMatthias Stahl
Last edited Nov 26, 2025
Created on Feb 10, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

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
97% match
Loading thumbnail…

Svelte + D3: Phyllotaxis layout

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.

MMatthias Stahl
94% match
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
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
78% 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
77% 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
77% match
Loading thumbnail…

linked-hover-phyllotaxis

A grid of small multiple canvases displays phyllotaxis spirals at different angular offsets, each built from 600 points rendered as 2-pixel rectangles. Hovering over any canvas triggers a mouse-distance scan to find the nearest point index, then a magenta SVG circle in every panel translates to that same index. The linked hover reveals how the spiral’s geometry shifts across offsets, Svelte manages state, and the data is generated procedurally via a phyllotaxis formula.

11wheel
76% match
Loading thumbnail…

Svelte app

A real-time animated wave of 50 circles and connecting lines renders in an SVG, with vertical positions computed by a sinusoidal function of time. The Svelte 3 component uses `requestAnimationFrame` to update the array of numbers each frame, while `{#each}` blocks bind the data to circle and line elements. This experiment demonstrates reactive updates in Svelte for smooth, declarative animation without explicit DOM manipulation.

CCurran Kelleher
76% match