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.