# Ellipses

Ellipses take a center vector, radius vector, and an angle.

``````import { Mafs, Ellipse, Circle, Coordinates, useMovablePoint, Theme, vec, Transform } from "mafs"

function MovableEllipse() {

// This center point translates everything else.
const translate = useMovablePoint([0, 0], {
color: Theme.orange,
})

// This outer point rotates the ellipse, and
// is also translated by the center point.
const rotate = useMovablePoint([hintRadius, 0], {
color: Theme.blue,
// Constrain this point to only move in a circle
constrain: (position) =>
})
const angle = Math.atan2(rotate.point[1], rotate.point[0])

const width = useMovablePoint([-2, 0], {
constrain: "horizontal",
})
const height = useMovablePoint([0, 1], {
constrain: "vertical",
})

return (
<Mafs viewBox={{ x: [-3, 3], y: [-3, 3] }}>
<Coordinates.Cartesian />

<Transform translate={translate.point}>
<Transform rotate={angle}>
{/*
* Display a little hint that the
* point is meant to move radially
*/}
<Circle
center={[0, 0]}
strokeStyle="dashed"
strokeOpacity={0.3}
fillOpacity={0}
/>

<Ellipse
center={[0, 0]}
/>

{width.element}
{height.element}
</Transform>

{rotate.element}
</Transform>

{translate.element}
</Mafs>
)
}``````

## Props

`<Ellipse ... />`
View on GitHub
NameDescriptionDefault
`center*`
`Vector2`
β
`radius*`
`Vector2`
β
`angle`
`number`
β
`svgEllipseProps`
`SVGProps<SVGEllipseElement>`
`{}`
`color`
`string`
`var(--mafs-fg)`
`weight`
`number`
`2`
`fillOpacity`
`number`
`0.15`
`strokeOpacity`
`number`
`1`
`strokeStyle`
`"solid" | "dashed"`
`solid`

## π·ββοΈ Work in progress

Support for defining ellipses in terms of two foci is planned. In the meantime, you can accomplish this using a parametric function.

Make suggestions on GitHub