Arc

Pie sector (arc wedge) with adjustable radius and aperture angle

Props

originstring

Default:center

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

origin

stringDefault: center

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

colorstring

Default:#ffffff

Fill color of the arc

color

stringDefault: #ffffff

Fill color of the arc

center{x: number, y: number}

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

Center position of the arc

center

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

Center position of the arc

radiusnumber

Default:0.38

Radius of the pie sector

radius

numberDefault: 0.38

Radius of the pie sector

aperturenumber

Default:270

Aperture angle of the wedge in degrees (360 = full circle)

aperture

numberDefault: 270

Aperture angle of the wedge in degrees (360 = full circle)

rotationnumber

Default:0

Rotation in degrees

rotation

numberDefault: 0

Rotation in degrees

softnessnumber

Default:0

Edge softness for antialiasing

softness

numberDefault: 0

Edge softness for antialiasing

strokeThicknessnumber

Default:0

Stroke thickness. Zero means no stroke.

strokeThickness

numberDefault: 0

Stroke thickness. Zero means no stroke.

strokeColorstring

Default:#000000

Color of the stroke outline

strokeColor

stringDefault: #000000

Color of the stroke outline

strokePosition"outside" | "center" | "inside"

Default:center

Position of the stroke relative to the shape edge

strokePosition

"outside" | "center" | "inside"Default: center

Position of the stroke relative to the shape edge

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:linear

Color space for blending fill and stroke colors

colorSpace

Color space for blending fill and stroke colors

Usage

<Shader>
  <Arc
    color="#ffffff"
    :radius="0.38"
  />
</Shader>

<Shader>
  <Arc
    color="#ffffff"
    radius={0.38}
  />
</Shader>

<Shader>
  <Arc
    color="#ffffff"
    radius={0.38}
  />
</Shader>

<Shader>
  <Arc
    color="#ffffff"
    radius={0.38}
  />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Arc', props: { color: '#ffffff', radius: 0.38 } }
  ]
})

AngularBlur

Ascii