Skip to main content
SimilarExport ZIP
100%

Fork of Svelte + D3: Canvas & renderless components

✓ Published0🌍 Public
Rrudi.oreillymeehan@gmail.com
Last edited Oct 1, 2024
Created on Oct 1, 2024

Ten thousand tweened circles animate across a full-screen canvas, cycling through new random positions and radii every two seconds with a magma color scale. The Svelte example pairs a renderless Canvas component with a Circle component that registers draw functions via Svelte’s context API, using `d3.scaleLinear`, `scaleSequential`, and `interpolateMagma` for mapping. Each circle’s attributes transition smoothly through `tweened` stores with `cubicOut` easing, while `requestAnimationFrame` batches canvas redraws for efficient animation.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Svelte + D3: Canvas & renderless components

This example shows 34,000 circles on a canvas, each updated every five seconds with random positions and radii. A Svelte renderless component system separates canvas management from rendering logic: a canvas component provides a draw context, while circle components register individual draw functions and use Svelte's `tweened` motion with `cubicOut` easing to animate transitions between data updates. The visualization uses D3's `scaleLinear` and `scaleSequential` with `interpolateMagma` to map random values to coordinates and colors.

Rrudi.oreillymeehan@gmail.com
95% match
Loading thumbnail…

Svelte + D3: Canvas & renderless components

Ten thousand semi-transparent dots pulse in a two-second loop, their positions, sizes, and magma-scale colors assigned by random functions mapped through D3 scales. Svelte components manage the lifecycle: a canvas component coordinates drawing and invalidation, while individual circle components use `svelte/motion` tweens to animate between updates, rendering efficiently via Canvas API calls.

MMatthias Stahl
90% match
Loading thumbnail…

Fork of Svelte + D3 Starter

Six translucent circles of varying sizes and colors from a blue palette are overlaid on a warm orange-tinted SVG canvas. The circles’ positions, radii, and fills come from hardcoded JavaScript objects, rendered as SVG `<circle>` elements via Svelte’s `{#each}` block. The example demonstrates a minimal Svelte component using declarative markup, with styling applied through a scoped `<style>` tag, while D3 is loaded as a dependency but not used in the visible code.

Rrichard.adamson@hotmail.com
83% 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
83% 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
82% 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
81% match
Loading thumbnail…

Fork of Svelte Starter

A Svelte component renders six colored circles of varying sizes and positions on a 1000×500 SVG canvas, with each circle’s coordinates, radius, and fill color defined in an inline data array. The circles use a fixed opacity of 0.708 applied via CSS, over a light green background. The example demonstrates Svelte’s `{#each}` block for iterating over data to generate SVG elements, with the D3 library loaded as a dependency but unused in the visible rendering logic.

GGnome Fire
80% 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
80% match