"<ellipse>"

Creates an ellipse centered on cx, cy, with radius rx and ry.

• DOM object: SVGEllipseElement
• SVG2 spec: https://www.w3.org/TR/SVG2/shapes.html#EllipseElement

The <ellipse> element draws an oval (a "stretched" circle) with independent horizontal and vertical radii. Think of it as the generalization of "<circle>" — set rx and ry to the same value and you get a circle; make them different and you get an oval. Like other Elements: Basic Shapes, ellipses participate in fill, stroke, transforms, and all other presentation attributes.

Use <ellipse> when you need a shape that is rounder in one axis than the other — for example, a perspective-flattened circle, an eye shape, or a rounded label background.

<ellipse cx="150" cy="150" rx="140" ry="100" fill="none" stroke="black" />

Attribute	Default	Description
cx	0	Center X coordinate.
cy	0	Center Y coordinate.
rx	auto ("auto" on rx/ry)	Horizontal radius, along the X axis.
ry	auto ("auto" on rx/ry)	Vertical radius, along the Y axis.