Linear Gradient Shading and Cubic Bezier Curves

Remarks

The code in Listing 5.6 contains three SVG path elements, each of which specifies two cubic Bezier curves, as illustrated below:

d="m50,50 C20,100 20,250 400,300 M100,150 C80,-80 80,150 400,400"

Although you've already seen examples that combine multiple Bezier curves, the interesting feature of this particular example is the color pattern of the graphics image. You probably expected to see two overlapping cubic Bezier curves; instead, the overlapping portion of the Bezier curves is white! This counter-intuitive color pattern creates the impression of two quasi orthogonal cubic Bezier curves.

Double Reflected Cubic Bezier Curves

Consider the double reflected cubic Bezier curves rendered in Figure 5.7.

Figure 5.7: A double cubic Bezier curve.

The SVG document doubleReflectedCubicBezier1.svg in Listing 5.7 demonstrates how to render a double reflected cubic Bezier curve.

Listing 5.7 doubleReflectedCubicBezier1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%"> <g transform="translate(45,45)"> <path d="m20,20 C20,50 20,450 300,200 s-150,-250 200,100" fill="blue" stroke-dasharray="2 2 2 2" style="stroke:#880088;stroke-width:4;"/> </g> <g transform="translate(35,35)"> <path d="m20,20 C20,50 20,450 300,200 s-150,-250 200,100" fill="white" stroke-dasharray="8 4 8 4" style="stroke:#880088;stroke-width:4;"/> </g> <g transform="translate(30,30)"> <path d="m20,20 C20,50 20,450 300,200 s-150,-250 200,100" fill="blue" stroke-dasharray="2 2 2 2" style="stroke:#880088;stroke-width:4;"/> </g> <g transform="translate(20,20)"> <

path

d="m20,20 C20,50 20,450 300,200 s-150,-250 200,100" fill="red" stroke-dasharray="8 4 8 4" style="stroke:black;stroke-width:4;"/> </g> </svg>

Remarks

The code in Listing 5.7 contains four cubic Bezier curves that create a reflection based on the s command such as the one listed below:

s-150,-350 200,200"

The s command has two control points. The first control point is (-150,-350), and the second control point is determined as follows :

1. determine the current point, which is (400,200)

2. determine the second control point of the 'C' command: (20,450)

3. reflect the point (20,450) through the point (400,200)

As you can see, the reflected cubic Bezier curve in this example produces an interesting graphics image; however, understanding how to specify such a curve does requires more effort than the previous examples of Bezier curves.

---