Svelte & Buddha Art

100%

Svelte & Buddha Art

✓ Published1🌍 Public

Last edited Dec 3, 2025

Created on Dec 3, 2025

Forked from Svelte + D3: Phyllotaxis layout (irrational 3)

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Svelte & Buddha Art

A thousand small Buddha silhouettes are arranged in a phyllotaxis spiral, each one filled with a warm color from a sequential D3 scale. One circle at a time becomes transparent, creating a slow rotating highlight through the composition. The code uses `layoutPhyllotaxis` to position points and draws an SVG path for each Buddha, animated by a `setInterval` that cycles an active index.

NNita

92% 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

81% 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

81% 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

79% 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

78% match

Loading thumbnail…

Buddha

A vibrant, generative SVG artwork uses React to render a densely layered composition of semi-transparent polygons. The code constructs a nested triple loop over an array 0–20, drawing hundreds of rotated squares with random coordinates, sizes, and neon RGB colors. These overlapping geometric shapes form a kaleidoscopic, abstract field, while a large Buddha-like path is superimposed at the center, creating a bold contrast between chaotic procedural geometry and a recognizable sacred form.

Bbibek lamsal

77% match

Loading thumbnail…

Unlimited Buddhas

An SVG visualization of 150 Buddha-like glyphs arranged in a generative spiral. Each path traces a complex, hand-coded curve, duplicated and transformed by translating them along a circular path and scaling them down to 10%. The composition emerges from nested `map()` loops in React, with each glyph’s position calculated from trigonometric functions of its index, producing a radiating mandala against a warm beige background.

NNita

77% match

Loading thumbnail…

Data generative art - Unlimited Buddha

A circular arrangement of small Buddha images radiates from the center of a 960-by-960 SVG canvas, with each image positioned at polar coordinates calculated from 50 radial positions and 50 angular steps. The React application uses `useState` and `Array.map` to generate the grid, placing each 20-pixel-wide SVG via an `<image>` element whose `href` points to an external Buddha icon. A decorative path element, embedded with a long SVG `d` attribute, sits at the top-left, scaled and translated. The composition creates a dense, repeating mandala-like pattern through simple trigonometric placement.

NNita

77% match