Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Svelte + D3: Random Lines

Public visualization

Svelte + D3: Random Lines

2 stars3🌍 Public
MMatthias Stahl
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.

Comments

Sign in to join the discussion.

MIT Licensed