Documentation

GuidesComponents

Circle

Generate a circle with adjustable size and softness

Props

colorstring
Default:#ffffff
The color of the circle
radiusnumber
Default:1
The radius of the circle. A value of one (1) is sets the circle to fit the canvas.
softnessnumber
Default:0
Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer.
center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
The center point of the circle
strokeThicknessnumber
Default:0
The thickness of the stroke outline. Zero (0) means no stroke.
strokeColorstring
Default:#000000
The color of the stroke outline
strokePosition"outside" | "center" | "inside"
Default:center
Position of the stroke relative to the circle edge
colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default:linear
Color space for blending fill and stroke colors in soft edges

Usage

<Shader>
  <Circle
    color="#ffffff"
    radius={1}
  />
</Shader>
Previous
ChromaticAberration
Next
ConcentricSpin