Arc-Based Diamond Patterns

---

Asymmetric Arc-Based Patterns

Consider the image in Figure 3.11, which is based on a set of four elliptic arcs.

Figure 3.11: A set of asymmetric elliptic arcs.

The document in Listing 3.11 defines an asymmetric set of elliptic arcs.

Listing 3.11 ellipticAsymmetricSegments3.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"> <!-- upper quadrants --> <g transform="translate(50,150)">   <path d="M200,100 v-60 a120,60 0 1,1 60,-120 z"     stroke-dasharray="1 1 1 1"     fill="red" stroke="yellow" stroke-width="8"/></g> <g transform="translate(50,50)">   <path d="M200,100 v-60 a120,60 0 1,1 60,120 z"     stroke-dasharray="2 2 2 2"     fill="green" stroke="blue" stroke-width="32"/></g> <!-- lower quadrants --> <g transform="translate(50,50)">   <path d="M200,100 v60 a120,60 0 1,0 -60,-120 z"     stroke-dasharray="8 8 8 8"     fill="blue" stroke="white" stroke-width="8"/></g> <g transform="translate(50,-50)">   <path d="M200,100 v60 a120,60 0 1,0 -60,120 z"     stroke-dasharray="8 8 8 8"     fill="yellow" stroke="green" stroke-width="16"/></g> </svg>

Remarks

The SVG code in Listing 3.11 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="M200,100 v-60 a120,60 0 1,1 60,-120 z"

The letter M specifies an absolute start point of (200,100) that is shifted to the point (200,40) by the component v-60. An elliptic arc having a horizontal axis of length 120 and a vertical axis of length 60 is rendered from the final point to the start point. Therefore, the coordinates of the final point are computed by adding the absolute start point with the relative terminal point as follows: (120,40) + (120,60) = (240,100). A 'minor' elliptic arc is drawn counterclockwise from the start point (200,40) to the final point (240,100).

If you've managed to reach this point after having read all the details of the preceding examples pertaining to elliptic arcs, consider it a job well done! Knowing how to specify elliptic arcs in SVG can definitely be a challenge, so don't feel discouraged if you've had to struggle through the code. The remaining examples in this chapter pertain to graphics images that are based on entire circles and ellipses rather than arcs, which means that you'll progress through the code much more quickly.

---