A circle is a round SVG shape defined by one center point and one uniform radius. In an SVG coordinate system, set its horizontal center with cx, vertical center with cy, and size with r. Add fill, stroke, and stroke-width to control its appearance. section 1.2.2
Draw an SVG circle
Place a circle at x 530 and y 80 with a radius of 50. A transparent fill and visible stroke make the outline clear. <circle cx="530" cy="80" r="50" fill="none" stroke="#81c21c" stroke-width="3" /> section 1.2.2
Circles can encode locations and quantities. On a map, project each city’s longitude and latitude into SVG coordinates, then use a radial scale to turn its number of laureates into a circle radius. Dense groups of city circles can reduce readability, motivating later interaction such as brushing. section 13.2.4
Size a responsive background circle
A small multiple can reserve fixed padding around a circle and calculate its radius from the available width. Group transforms move the local origin to the circle’s center, so the circle itself can use cx="0" and cy="0"; the same origin supports month axes and labels. section 14.5.1
Listing 14.6 Adding the circle and the year (GridItem.svelte)
<script>
export let smWidth; #1
export let smHeight;
export let year;
const padding = 60; #2
$: radius = (smWidth - 2 * padding) / 2;
</script>
<g transform="translate({smWidth / 2}, 0)"> #3
<g transform="translate(0, {padding + radius})">
<circle cx={0} cy={0} r={radius} />
</g>
<text x={0} y={smHeight - 5} text-anchor="middle">{year}</text>
</g>
<style lang="scss">
circle {
fill: none;
stroke: $text;
}
</style>
This component calculates a radius from width and padding, centers a circle with nested groups, and adds a year label. section 14.5.1
Canvas takes a different approach: it has no dedicated circle method. Draw a complete arc by using arc(x, y, radius, 0, 2 * Math.PI), then stroke or fill the current path. Call beginPath() before separate shapes so their paths do not run together. section 15.2.4
