Rendering Cubic Bezier Curves

---

Linear Gradient Shading and Cubic Bezier Curves

Consider the cubic Bezier curves rendered in Figure 5.5.

Figure 5.5: Linear gradient shading and cubic Bezier curves.

The SVG document in Listing 5.5 demonstrates how to use the SVG path element in order to combine linear gradient shading with a pair of cubic Bezier curves.

Listing 5.5 cBezier2LG4Pipe1.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%"> <defs>    <linearGradient                     gradientTransform="rotate(90)">       <stop offset="0%"   stop-color="#C0C040"/>       <stop offset="30%"  stop-color="#303000"/>       <stop offset="60%"  stop-color="#FF0F0F"/>       <stop offset="90%"  stop-color="#101000"/>    </linearGradient> </defs> <g transform="translate(20,20)"> <path    d="M0,0 C200,150 400,300 20,250"    stroke-dasharray="4 4 4 4"    fill="url(#gradientDefinition1)"    style="stroke:blue;stroke-width:4;"/> </g> <g transform="translate(20,200)"> <path    d="M200,150 C0,0 400,300 20,250"    stroke-dasharray="12 12 12 12"    fill="url(#gradientDefinition1)"    style="stroke:blue;stroke-width:4;"/> </g> </svg>

Remarks

The SVG code in Listing 5.5 contains the two cubic Bezier curves given below:

d="M0,0 C200,150 400,300 20,250" d="M200,150 C0,0 400,300 20,250"

By now you understand the purpose of each component of a cubic Bezier curve. The visual effect in this example is achieved by setting the fill attribute to the value gradientDefinition1, which is a linear gradient that is defined in the SVG defs element. Notice how different values for the stroke-dasharray can affect the appearance of an SVG element: the first Bezier curve has a dimpled effect whereas the second Bezier curve has a more 'standard' dotted border. You can create a Venetian shading effect by means of the following specification in the SVG defs element:

<defs>  <linearGradient        x1="10" y1="10" x2="100" y2="10"       gradientUnits="userSpaceOnUse"       spreadMethod="repeat">       <stop offset="20%" style="stop-color:#FF0000"/>       <stop offset="80%" style="stop-color:#000000"/>   </linearGradient> </defs>

Notice that the spreadMethod attribute has the value repeat; this results in a repetition of the linear gradient, which in turn creates a Venetian shading effect. Try removing this attribute and see how the modified code creates a much different effect. In Chapter 14 you'll learn techniques that will enable you to create much more sophisticated patterns.

---