# Ellipse

```ts
import { Ellipse } from 'cx/svg';
```

The `Ellipse` component is a CxJS version of the SVG `ellipse` element designed for responsive layouts. It uses [bounded object](./svg#bounded-objects) properties to automatically adapt to its container.

This example shows concentric ellipses using increasing `margin` values. Each ellipse fills its bounded area minus the margin.

```tsx
import { Svg, Ellipse } from "cx/svg";

export default (
  <Svg style="width: 400px; height: 400px; border: 1px dashed #ddd" padding={5}>
    <Ellipse margin={10} colorIndex={0} />
    <Ellipse margin={20} colorIndex={1} />
    <Ellipse margin={30} colorIndex={2} />
    <Ellipse margin={40} colorIndex={3} />
    <Ellipse margin={50} colorIndex={4} />
    <Ellipse margin={60} colorIndex={5} />
    <Ellipse margin={70} colorIndex={6} />
    <Ellipse margin={80} colorIndex={7} />
    <Ellipse margin={90} colorIndex={8} />
    <Ellipse margin={100} colorIndex={9} />
    <Ellipse margin={110} colorIndex={10} />
    <Ellipse margin={120} colorIndex={11} />
    <Ellipse margin={130} colorIndex={12} />
    <Ellipse margin={140} colorIndex={13} />
    <Ellipse margin={150} colorIndex={14} />
    <Ellipse margin={160} colorIndex={15} />
  </Svg>
);

```

## Configuration

| Property     | Type            | Description                                                                       |
| ------------ | --------------- | --------------------------------------------------------------------------------- |
| `anchors`    | `string/number` | Position within parent bounds. Format: `"t r b l"`. See [Svg](./svg) for details. |
| `offset`     | `string/number` | Translate edges in pixels. Format: `"t r b l"`. See [Svg](./svg) for details.     |
| `margin`     | `string/number` | CSS-like margin. See [Svg](./svg) for details.                                    |
| `padding`    | `string/number` | Padding applied before passing bounds to children.                                |
| `fill`       | `string`        | Fill color for the ellipse.                                                       |
| `stroke`     | `string`        | Stroke color for the outline.                                                     |
| `colorIndex` | `number`        | Index in the default color palette. Sets both `fill` and `stroke`.                |