Circle

Generate a circle with adjustable size and softness

Props

  • origin

    Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

    Type
    string
    Default
    center

  • color

    The color of the circle

    Type
    string
    Default
    #ffffff

  • radius

    The radius of the circle. A value of one (1) is sets the circle to fit the canvas.

    Type
    number
    Default
    1

  • softness

    Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer.

    Type
    number
    Default
    0

  • center

    The center point of the circle

    Type
    {x: number, y: number}
    Default
    {"x":0.5,"y":0.5}

  • strokeThickness

    The thickness of the stroke outline. Zero (0) means no stroke.

    Type
    number
    Default
    0

  • strokeColor

    The color of the stroke outline

    Type
    string
    Default
    #000000

  • strokePosition

    Position of the stroke relative to the circle edge

    Type
    "outside" | "center" | "inside"
    Default
    center

  • colorSpace

    Color space for blending fill and stroke colors in soft edges

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    linear

Usage

<Shader>
  <Circle
    color="#ffffff"
    radius={1}
  />
</Shader>