🌍 Public
Viewing a saved revision (read-only)
464fa4239569445d9a86216c1204c4a4
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: