Circle

The <Circle> primitive draws an SVG circle at a given center point with a specified radius. Use it for dots, nodes, highlights, and any round shape in your scenes.

0.00s / 2.97s · F0

Props

Prop	Type	Default	Description
`cx`	`number`	`0`	X coordinate of the circle center
`cy`	`number`	`0`	Y coordinate of the circle center
`r`	`number`	`10`	Radius of the circle
`fill`	`string`	`'none'`	Fill color
`stroke`	`string`	`'currentColor'`	Stroke color
`strokeWidth`	`number`	`1`	Width of the stroke
`opacity`	`number`	`1`	Opacity from 0 to 1

Code Example

elements: {
  orbit: {
    id: 'orbit',
    type: 'circle',
    props: { type: 'circle', cx: 150, cy: 150, r: 60, stroke: '$accent', strokeWidth: 3, fill: 'none' },
  },
  highlight: {
    id: 'highlight',
    type: 'circle',
    props: { type: 'circle', cx: 350, cy: 150, r: 60, stroke: '$secondary', strokeWidth: 3, fill: 'none' },
  },
}