Baseline Widely available *
The <ellipse> SVG element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.
Note: Ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform attribute.
cx
The x position of the center of the ellipse. Value type: <length> | <percentage>; Default value: 0; Animatable: yes
cy
The y position of the center of the ellipse. Value type: <length> | <percentage>; Default value: 0; Animatable: yes
rx
The radius of the ellipse on the x axis. Value type: auto | <length> | <percentage>; Default value: auto; Animatable: yes
ry
The radius of the ellipse on the y axis. Value type: auto | <length> | <percentage>; Default value: auto; Animatable: yes
pathLength
This attribute lets specify the total length for the path, in user units. Value type: <number>; Default value: none; Animatable: yes
Note: Starting with SVG2 cx, cy, rx and ry are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.
html,
body,
svg {
height: 100%;
}
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4