Combining Ellipses

You likely know that by combining two ellipses that differ only slightly in size and shape, you can obtain a variety of interesting and attractive curved shapes. For example, with the following code:

Listing 3.14. (Ellipses02.svg)
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
      "http://www.w3.org/TR/2001/PR-SVG-20010719/ 
       DTD/svg10.dtd"> 
<svg> 
<ellipse cx="80" cy="170" rx="350" ry="100" 
style="stroke:none; fill:red"/> 
<ellipse cx="50" cy="172" rx="360" ry="110" 
style="stroke:none; fill:white"/> 
</svg>

you can produce the curve shown in Figure 03.12, which hints at dynamism and other positive attributes. You probably have seen many online logos created by combining ellipses in similar ...

Get Designing SVG Web Graphics now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial