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

import { Player, FadeIn, Draw, Circle } from '@elucim/core';

<Player width={500} height={300} fps={30} durationInFrames={60}>
  <FadeIn duration={20}>
    <Circle cx={150} cy={150} r={60} stroke="#6c5ce7" strokeWidth={3} fill="none" />
  </FadeIn>
  <Draw duration={30}>
    <Circle cx={350} cy={150} r={60} stroke="#ff6b6b" strokeWidth={3} fill="none" />
  </Draw>
</Player>

{
  "width": 500, "height": 300, "fps": 30, "durationInFrames": 60,
  "children": [
    {
      "type": "circle", "cx": 150, "cy": 150, "r": 60,
      "stroke": "#6c5ce7", "strokeWidth": 3, "fill": "none",
      "fadeIn": { "duration": 20 }
    },
    {
      "type": "circle", "cx": 350, "cy": 150, "r": 60,
      "stroke": "#ff6b6b", "strokeWidth": 3, "fill": "none",
      "draw": { "duration": 30 }
    }
  ]
}