Ring
Annular ring (donut) with adjustable radius and band thickness
Annular ring (donut) with adjustable radius and band thickness
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | color | #ffffff | Fill color of the ring |
| center | position | {"x":0.5,"y":0.5} | Center position of the ring |
| radius | range | 0.3 | Distance from center to the ring's midline in UV space |
| thickness | range | 0.07 | Half-width of the ring band - total ring width is twice this value |
| softness | range | 0 | Edge softness for antialiasing (applied to both inner and outer ring edges) |
| strokeThickness | range | 0 | Stroke thickness. Zero means no stroke. |
| strokeColor | color | #000000 | Color of the stroke outline |
| strokePosition | "outside" | "center" | "inside" | center | Position of the stroke relative to the ring edge |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for blending fill and stroke colors |
Usage
vue
<Shader>
<Ring
color="#ffffff"
:radius="0.3"
/>
</Shader>