O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required