Gradient Checkerboards and Multi-Quadratic Bezier Clip Paths | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Venetian Checkerboards and Quadratic Bezier Clip Paths

Consider the gradient checkerboard pattern rendered in Figure 5.3.

click to expand
Figure 5.3: A Venetian quadratic Bezier-bound gradient checkerboard pattern.

The SVG document in Listing 5.3 demonstrates how to use the SVG path element in order to generate a Venetian gradient checkerboard pattern bound by a quadratic Bezier curve.

Listing 5.3 vVenetianGradientPatternQBCP1.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>    <pattern             width="50" height="50"            patternUnits="userSpaceOnUse">     <linearGradient        x1="0" y1="0" x2="50" y2="0"         gradientUnits="userSpaceOnUse"         spreadMethod="repeat">       <stop offset="0%"   style="stop-color:#FF0000"/>       <stop offset="100%" style="stop-color:#000000"/>     </linearGradient>     <rect       style="fill:url(#repeatedGradientDefinition)"       x="0" y="0" width="50" height="50"/>     </pattern>    <clipPath              clipPathUnits="userSpaceOnUse">     <path d="m0,0 Q100,0 200,200 T300,200"           style="fill:red;stroke:blue;stroke-width:4;"/>     <path d="m0,0 l50,50 l50,-50"/>     <rect   x="30"     y="50"               width="40" height="80"/>     <circle cx="100" cy="50"  r="10"/>     <circle cx="150" cy="90"  r="40"/>     <circle cx="200" cy="125" r="10"/>     <ellipse cx="250" cy="150" rx="40" ry="20"/>   </clipPath>  </defs>  <g transform="translate(50,50)"   clip-path="url(#clipPathDefinition)"   stroke="black" fill="none">   <rect      style="fill:url(#multiPattern)"      x="0" y="0" width="400" height="400"/>  </g>  </svg>

Remarks

The SVG code in Listing 5.3 contains the same quadratic Bezier curve as Listing 5.1, and it uses this Bezier curve as a clip path while rendering a gradient checkerboard pattern consisting of rectangles. These rectangles are rendered with vertical linear gradient shading that varies linearly from red to black in order to create a 'Venetian shading' effect. Now look at the SVG defs element, which starts with the definition of a checkerboard pattern whose id attribute has the value checkerPattern, followed by an SVG clipPath element whose id attribute equals clipPathDefinition.

The actual rendering takes place in the SVG g element, which first translates the origin from the point (0,0) to the point (50,50). Notice how the SVG g element also contains the following line that specifies the clip path that is defined in the SVG defs element:

clip-path="url(#clipPathDefinition)"            stroke="black" fill="none">

Now that the 'core' definition and code is in place, you can add various SVG elements as you see fit; in this example, we have an SVG rect element, three SVG circle elements, and one SVG ellipse element, all of which have the same fill attribute applied to them.