Coloring Elliptic Arcs

---

Arc-Based Petal Patterns

Figure 3.9 depicts a set of elliptic arcs that create a petal-like pattern.

Figure 3.9: Elliptic petals.

The SVG document in Listing 3.9 defines a set of elliptic arcs.

Listing 3.9 ellipticPetals1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"      xmlns="http://www.w3.org/2000/svg"> <g transform="translate(0,0)">   <path d="M150,150 a100,100 0 0,0 100,100 z"         fill="red" stroke="black" stroke-width="4"/>   <path d="M150,150 a100,100 0 0,0 -100,100 z"         fill="green" stroke="black" stroke-width="4"/>   <path d="M150,150 a100,100 0 0,0 -100,-100 z"         fill="blue" stroke="black" stroke-width="4"/>   <path d="M150,150 a100,100 0 0,0 100,-100 z"         fill="yellow" stroke="black" stroke-width="4"/> </g> </svg>

Remarks

The SVG code in Listing 3.9 demonstrates how to use the SVG path element in order to draw a set of elliptic arcs. Consider the points in the first SVG path element:

 <path d="M150,150 a100,100 0 0,0 100,100 z" 

The letter M specifies an absolute start point of (150,100) with an elliptic arc having a horizontal axis of length 100 and vertical axis of length 100. The final point is computed by adding the absolute start point with the relative terminal point as follows: (150,150) + (100,100) = (250,250). A 'minor' elliptic arc is drawn counterclockwise from the start point (150,150) to the final point (250,250). The remaining three SVG path elements define the other three elliptic 'petals' that form the graphics image.

---