Polygon

Regular polygon with adjustable sides and corner rounding

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

    Fill color of the polygon

    Type
    string
    Default
    #ffffff

  • center

    Center position of the polygon. Accepts CSS units, see Sizing and units.

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

  • radius

    Inradius — distance from the center to the middle of each side, in UV space (the vertices sit a little farther out). Accepts CSS units, see Sizing and units.

    Type
    number | string
    Default
    0.4

  • sides

    Number of sides (3 = triangle, 4 = square, 6 = hexagon, etc.)

    Type
    number
    Default
    6

  • rounding

    Corner rounding — 0 is sharp vertices, 1 morphs into a circle

    Type
    number
    Default
    0

  • rotation

    Rotation in degrees

    Type
    number
    Default
    0

  • softness

    Edge softness for antialiasing

    Type
    number
    Default
    0

  • strokeThickness

    Stroke thickness. Zero means no stroke.

    Type
    number
    Default
    0

  • strokeColor

    Color of the stroke outline

    Type
    string
    Default
    #000000

  • strokePosition

    Position of the stroke relative to the shape edge

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

  • colorSpace

    Color space for blending fill and stroke colors

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

Usage

<Shader>
  <Polygon
    color="#ffffff"
    radius={0.4}
  />
</Shader>