D3.js
Elipses
Las elipses tienen centro en cx y cy, como los círculos, pero también tienen dos radios, que se definen con rx y ry. El siguiente código crea tres elipses en diferentes posiciones.
<svg width="600" height="300">
<ellipse cx="150" cy="100" rx="150" ry="100" fill="yellow" fill-opacity="0.5" stroke="blue" stroke-width="1" stroke-dasharray="0.5" />
<ellipse cx="400" cy="150" rx="75" ry="125" fill="red" fill-opacity="0.2" stroke="red" stroke-width="5" stroke-opacity="0.5" />
<ellipse cx="400" cy="250" rx="150" ry="40" fill="black" fill-opacity="0" stroke="green" stroke-width="20" stroke-opacity="0.2" />
</svg>El código anterior produce el siguiente resultado: