Skip to main content
The Circle component defines circular or elliptical geometry within a Shape. It must always be a child of a Shape component.

​
Props

​
x
number
required
X-coordinate of the circle’s center point in pixels.
​
y
number
required
Y-coordinate of the circle’s center point in pixels.
​
radius
number
Radius for a perfect circle in pixels.Use this for circular shapes. Cannot be used with rx or ry.
​
rx
number
Horizontal radius for an ellipse in pixels.Use with ry to create elliptical shapes. Cannot be used with radius.
​
ry
number
Vertical radius for an ellipse in pixels.Use with rx to create elliptical shapes. Cannot be used with radius.
You must provide either radius for a circle, or both rx and ry for an ellipse.

​
Usage

​
Basic Circle

import { Shape, Circle } from 'react-thorvg-fiber';

<Shape fill={[255, 0, 0, 255]}>
  <Circle x={100} y={100} radius={50} />
</Shape>

​
Ellipse

import { Shape, Circle } from 'react-thorvg-fiber';

<Shape fill={[0, 255, 0, 255]}>
  <Circle x={150} y={100} rx={80} ry={40} />
</Shape>

​
Circle with Stroke

import { Shape, Circle } from 'react-thorvg-fiber';

<Shape
  fill={[255, 255, 255, 255]}
  stroke={[0, 0, 255, 255]}
  strokeWidth={3}
>
  <Circle x={100} y={100} radius={50} />
</Shape>

​
Multiple Circles in One Shape

import { Shape, Circle } from 'react-thorvg-fiber';

<Shape fill={[255, 200, 100, 180]}>
  <Circle x={50} y={100} radius={30} />
  <Circle x={150} y={100} radius={30} />
  <Circle x={100} y={100} radius={20} />
</Shape>

​
Transparent Circle

import { Shape, Circle } from 'react-thorvg-fiber';

<Shape
  fill={[100, 200, 255, 255]}
  opacity={128}
>
  <Circle x={100} y={100} radius={60} />
</Shape>

​
Elliptical Ring

import { Shape, Circle } from 'react-thorvg-fiber';

<Shape
  fill={[255, 255, 255, 0]}
  stroke={[255, 0, 0, 255]}
  strokeWidth={5}
>
  <Circle x={150} y={100} rx={70} ry={50} />
</Shape>

​
Parent-Child Relationships

  • Parent: Must be a child of Shape
  • Children: Circle does not accept children
A Circle component that is not a child of a Shape will not render.
The position (x, y) represents the center point and is relative to the parent Shape’s transform. If the Shape has x={100}, a Circle with x={50} will have its center at pixel position 150.

​
TypeScript Interface

interface CircleProps {
  x: number;
  y: number;
  radius?: number;
  rx?: number;
  ry?: number;
}
Source: packages/fiber/src/types.ts:173-198

Build docs developers (and LLMs) love

Get started for freeTalk to us