May 2019
Beginner to intermediate
650 pages
14h 50m
English
Ellipses have a center in cx and cy like circles, but also have two radii, which are set with rx and ry. The following code creates three ellipses in different positions.
<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="5 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>
The preceding code produces the following result:
Read now
Unlock full access