Arc-Based Petal Patterns | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Arc-Based Diamond Patterns

Consider the image in Figure 3.10 that is based on a set of four elliptic arcs.

click to expand
Figure 3.10: An elliptic diamond.

The SVG document in Listing 3.10 defines an elliptic diamond.

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

Remarks

The SVG code in Listing 3.10 demonstrates how to use the SVG path element in order to draw a set of elliptic arcs, all of which have a stroke-dasharray attribute that creates a dotted effect.

Consider the elements in the d attribute of the second SVG path element:

 <path d="M200,100 v-60 a120,60 0 0,0 120,60 z"

The letter M specifies an absolute start point of (200,100), followed by a vertical shift to the point (200,40) by the component v-60.

The term a120,160 specifies an elliptic arc having a horizontal axis of length 120 and a vertical axis of length 60 that is rendered from the final point to the start point in a relative fashion. You can compute the coordinates of the final point 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 counter clockwise from the start point (200,40) to the final point (240,100). Notice that two of the elliptic arcs are rendered clockwise and the other two elliptic arcs are rendered counterclockwise. Consequently, two of the elliptic arcs have "0,1" in their definition and the other two elliptic arcs have "0,0" in their definition.