Double Reflected Cubic Bezier Curves

---

Cubic Quadratic Bezier Curves

Consider the cubic quadratic Bezier curves rendered in Figure 5.8.

Figure 5.8: A cubic quadratic Bezier curve.

The SVG document cubicQuadraticBezier1.svg in Listing 5.8 demonstrates how to render a cubic quadratic Bezier curve.

Listing 5.8 cubicQuadraticBezier1.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(20,110)">  <path    d="m50,50 C20,100 20,250 400,250       M50,50 Q100,0 200,200 T350,-80"    fill="blue"    stroke-dasharray="1 1 1 1"    style="stroke:red;stroke-width:24;"/>  </g>  <g transform="translate(0,100)">  <path    d="m50,50 C20,100 20,250 400,250       M50,50 Q100,0 200,200 T350,-80"    fill="red"    stroke-dasharray="1 1 1 1"    style="stroke:blue;stroke-width:8;"/>  </g>  </svg>

Remarks

The code in Listing 5.8 defines two cubic Bezier curves, each of which is immediately followed by a quadratic Bezier curve by means of the following type of code:

 d="m50,50 C20,100 20,250 400,250   M50,50 Q100,0 200,200 T350,-80"

You've already seen examples of both of the Bezier curves in the preceding code fragment; this example demonstrates how to combine a cubic Bezier curve and a quadratic Bezier curve in order to create a sail-like image. Notice the 'buzzed' effect that is produced by the following attribute values:

  stroke-dasharray="1 1 1 1"   style="stroke:red;stroke-width:24;"/>

The key idea involves a large value for the stroke-width attribute combined with small integer values in the stroke-dasharray attribute. The juxtaposition of finely-grained line segments contrasts nicely with the curvilinear nature of Bezier curves.

---