Ellipse

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 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.

 <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 for details.
`offset`	`string/number`	Translate edges in pixels. Format: `"t r b l"`. See Svg for details.
`margin`	`string/number`	CSS-like margin. See 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`.