Sugar for <frame radius="9999">. Full-radius rendering is the contract — radius is not an attribute on <ellipse>. Equal dimensions produce a circle.
ellipse
tagoval & circleSugar for <frame radius="9999">. Full-radius rendering is the contract — radius is not an attribute on <ellipse>. Equal dimensions produce a circle.
Arc and donut shapes (progress rings, pie segments) are SVG assets referenced via <img>.
| Attr | Type | Description |
|---|---|---|
name | string | |
x | number | |
y | number | |
w required | number | 'fill' | Unified width. Replaces width + sizing-h. Absent = hug (valid on row/col/stack/text/instance only). "fill" = grow to fill parent. number = fixed px. String forms: '50%' (of parent), '1.5rem', '100vw', 'calc(100% - 16px)' Not valid on frame/img/svg — those require explicit values. |
h required | number | 'fill' | Unified height. Replaces height + sizing-v. Absent = hug (valid on row/col/stack/text/instance only). "fill" = grow to fill parent. number = fixed px. String forms: '50%' (of parent), '1.5rem', '100vh', 'calc(100% - 16px)' Not valid on frame/img/svg — those require explicit values. |
fill | fill | |
fill-style | string | |
effect-style | string | |
border | string | |
border-color | color | token | |
border-width | number | |
border-style | solid dashed dotted | |
border-align | center inside outside | |
shadow | string | |
fill-rule | nonzero evenodd |
Example
<ellipse fill="#FF3B30" w="8" h="8" /> <ellipse fill="#E5E5EA" w="48" h="48" /> <ellipse fill="none" border="2 $primary" w="48" h="48" />