Svelte: SVG + HTML overlay

100%

Svelte: SVG + HTML overlay

✓ Published0🌍 Public

Last edited Feb 25, 2021

Created on Feb 19, 2021

This example shows a purple outlined circle centered inside a bordered container, with an HTML text overlay reading “This is a circle.” The Svelte component binds the container’s client width and height to SVG dimensions, drawing the circle with a stroke-width proportional to the smaller side. An absolutely positioned HTML div sits on top of the SVG using flexbox centering, demonstrating how to combine SVG and HTML layers in Svelte’s reactive data-binding model.

AI-generated description

MIT Licensed

Similar vizzes

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

79% match

Loading thumbnail…

Fork of Svelte + D3 Starter

Six translucent circles of varying sizes and colors from a blue palette are overlaid on a warm orange-tinted SVG canvas. The circles’ positions, radii, and fills come from hardcoded JavaScript objects, rendered as SVG `<circle>` elements via Svelte’s `{#each}` block. The example demonstrates a minimal Svelte component using declarative markup, with styling applied through a scoped `<style>` tag, while D3 is loaded as a dependency but not used in the visible code.

Rrichard.adamson@hotmail.com

78% match

Loading thumbnail…

Svelte Interaction Test

This example demonstrates interactive selection within a visualization built using Svelte and SVG, where clicking a circle highlights it with a thick black stroke. The circles, positioned with fixed coordinates and varied sizes and colors, respond to user clicks through a Svelte event handler that updates a `selectedId` in the component's state. It showcases a proof-of-concept for wrapping Svelte components via d3-rosetta, allowing state persistence across hot reloads while leveraging Svelte's reactive data binding for the visual update.

CCurran Kelleher

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

Svelte 5 Starter

This example shows six circles positioned across an SVG canvas using D3 scales, with colors and radii drawn from static data. The Svelte 5 starter uses `$state` and `$derived` runes to track container dimensions and create `scaleLinear` functions from D3, mapping x- and y-coordinates to the responsive width and height. A reusable Circle component uses Svelte 5 `$props()` to pass cx, cy, r, and fill values, with circles given a fixed opacity via CSS.

MMatthias Stahl

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

76% match

Loading thumbnail…

Svelte Circles with D3

This example combines Svelte’s reactive components with D3.js to render two distinct visualizations. The primary view displays an array of circles with varied radii and colors, scaled from raw coordinate data using d3.scaleLinear functions. The secondary component loads CSV data from a GitHub gist via d3.csv and renders it as a simple HTML list. The visualization demonstrates data binding through Svelte’s templating syntax alongside D3’s selection and scaling APIs, using SVG elements for the circle rendering.

AAbdulhaq Adetunji Salako

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

75% match