Svelte + D3: Random Lines

100%

Svelte + D3: Random Lines

✓ Published2🌍 Public

Last edited Nov 26, 2025

Created on Jan 29, 2024

This example generates fifty random-walk lines, each drawn as a smooth, semi-transparent colored path that re-randomizes every two seconds. Svelte’s `tweened` motion and `interpolatePath` from d3-interpolate-path animate the transition between the old and new line shapes. The code uses D3’s `scaleLinear`, `line`, and `curveNatural` to map data points to SVG coordinates, while Svelte’s `bind:clientWidth` and `bind:clientHeight` make the visualization responsive to container size.

AI-generated description

Random lines with inbuilt responsiveness.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Svelte + D3: Random Lines

This visualization shows 100 randomly generated lines that smoothly transition to new shapes every second. Each line is a natural cubic spline through a random walk of 100 points, rendered as a stroked SVG path with semi-transparent coloring. The animation leverages the Svelte `tweened` motion primitive combined with the `d3-interpolate-path` library to morph between path states. Svelte's reactive bindings to window dimensions and D3's `scaleLinear` and `extent` functions keep the chart responsive and properly scaled as the viewport changes.

CCurran Kelleher

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

80% match

Loading thumbnail…

Holy Moly:Beautiful Viz

This visualization displays 50 natural cubic splines that form a dynamic, morphing line field. Every two seconds, the dataset is regenerated as random walks, and the paths smoothly transition to their new positions using Svelte's `tweened` motion with `interpolatePath`, `cubicOut` easing, and a one-second duration. Each SVG path is rendered with a semi-transparent random RGB stroke, layered over a responsive full-viewport canvas. The code leverages d3's `line`, `curveNatural`, `scaleLinear`, and `extent` functions to compute and scale the coordinate systems.

NNita

78% match

Loading thumbnail…

Spline Transition

A smooth line continuously shifts leftward as new random data points, generated by `d3.randomNormal`, are appended and old ones removed. The `d3.line` path with `d3.curveBasis` interpolation animates via a `transition` that slides the SVG element using a transform, while a `clipPath` rect masks the line so the changing tangent at the boundary remains hidden. The axes use `d3.axisBottom` and `d3.axisLeft` on linear scales.

深深度碎片

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

Something with D3

This example uses D3’s `line` generator to draw 40 random black polylines, each with seven vertices, on an SVG canvas sized to the browser window. A radial gradient defined in `<defs>` fills the background with a smooth transition from grey to dark grey. The code generates coordinates using `Math.random()` and appends each path with a 2-pixel stroke.

IIgorGorin00

77% match

Loading thumbnail…

Spline Transition

A path of normally distributed random data, rendered as a smooth basis-interpolated line, continuously scrolls leftward as new points append and old ones shift off. The animation loops by chaining transitions with `d3.active` and `transition.on`, updating the `d` attribute via `d3.line` before translating the SVG path. A `clipPath` rect hides the sliding tangent change at the edges. The example uses d3.v4, random samples from `d3.randomNormal`, and SVG axes with `d3.axisBottom` and `d3.axisLeft`.

Mmbostock

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

76% match