Svelte + D3 + Regl starter (WebGL)

100%

Svelte + D3 + Regl starter (WebGL)

✓ Published3🌍 Public

Last edited Nov 26, 2025

Created on Feb 12, 2024

This example displays 100,000 colored dots of varying sizes and opacities on a WebGL canvas, with an overlay text reporting the total count. The visualization uses Svelte to manage the application state and interface, D3 for generating the data—including coordinates, radii via `randomExponential`, a warm color scale via `scaleSequential` and `interpolateWarm`, and opacities—and the regl library to render the points as a canvas-based WebGL scene. A custom regl fragment defines the dot shape with antialiasing, while blending controls the visual stacking of overlapping points.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

100,000 dots

This visualization displays 100,000 randomly positioned dots, each with a unique color, opacity, and size, rendered as a single dense field. The dots are generated with D3's `scaleSequential` and `interpolateWarm` for the color palette, `randomExponential` for radius distribution, and uniform random functions for coordinates and opacities. The scene is drawn using the Regl library on a WebGL canvas, with a custom fragment shader applying antialiasing and per-dot blending for a smooth, overlapping presentation.

NNita

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

78% 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…

Svelte + D3 Starter

Six semi-transparent circles are drawn on a warm orange-tinted background, showing a simple static data visualization example of formatted points. The project demonstrates a minimal Svelte setup that integrates the D3 library, using Svelte’s `{#each}` block to render SVG `<circle>` elements directly from hardcoded data arrays. The `App.svelte` component defines the data and styling, while `index.js` mounts it via Svelte’s `mount` function, and the `package.json` configures D3 as a global dependency for the VizHub environment.

MMatthias Stahl

77% 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…

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

76% match

Loading thumbnail…

Svelte + D3: Voronoi

A Voronoi diagram partitions random points into cells, with a highlighted pink cell and black dot that follow the mouse cursor across the screen. The example uses D3's `Delaunay` and `voronoi` APIs to compute the diagram from 100 randomly generated data points, then renders it as SVG paths and circles in a Svelte component with reactive declarations for scales and layout.

MMatthias Stahl

75% match

Loading thumbnail…

regl-hurricane

Animated WebGL visualization of 10,000 line segments that continuously morph between different geometric patterns—a circle, then two distinct random point distributions. The code uses the regl framework with custom GLSL vertex and fragment shaders to interpolate between precomputed buffer states, cycling through three datasets in a loop. Line color shifts from blue to red based on each segment's position index, while d3 generates the underlying point data and easing functions control the smooth transitions.

11wheel

75% match