Components
Ellipse
A themed native SVG ellipse primitive. Render it inside Svg or an appropriate SVG
parent.
Props
Native attributes and event handlers are forwarded to the underlying ellipse element
unless handled by the component.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content snippet rendered by the component. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | SVGEllipseElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | true | Bindable visibility state. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Ellipse from sveltewind/components. This example shows its default styling in a usable context.
+page.svelte
Loading...Examples
Theme variants
Every variant available for Ellipse in the built-in themes is shown below.
fill — Apply the fill variant.
+page.svelte
Loading...outline — Apply the outline variant.
+page.svelte
Loading...primary — Apply the primary variant.
+page.svelte
Loading...rounded — Apply the rounded variant.
+page.svelte
Loading...secondary — Apply the secondary variant.
+page.svelte
Loading...Class overrides
Apply text-rose-500 opacity-75 locally.
+page.svelte
Loading...Props and behavior
Change rx, ry while retaining the default component styling.
+page.svelte
Loading...Content and values
Provide different fill values.
+page.svelte
Loading...