🌍 Public
Viewing a saved revision (read-only)
46e77c10c1fd4a128333545a6efc6400
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.
AI-generated descriptionA demo of responsive Svelte! Code by Matthias Stahl from
https://github.com/higsch/svelte-d3-training/blob/main/scales/src/App.svelte
See also this video: