Circle
Generate a circle with adjustable size and softness
Generate a circle with adjustable size and softness
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | color | #ffffff | The color of the circle |
| radius | range | 1 | The radius of the circle. A value of one (1) is sets the circle to fit the canvas. |
| softness | range | 0 | Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer. |
| center | position | {"x":0.5,"y":0.5} | The center point of the circle |
| strokeThickness | range | 0 | The thickness of the stroke outline. Zero (0) means no stroke. |
| strokeColor | color | #000000 | The color of the stroke outline |
| strokePosition | "outside" | "center" | "inside" | center | Position of the stroke relative to the circle edge |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for blending fill and stroke colors in soft edges |
Usage
vue
<Shader>
<Circle
color="#ffffff"
:radius="1"
/>
</Shader>