feTurbulence Filter Primitives and pattern Elements

---

Quadratic Bezier Curves and feTurbulence Filter Primitives

Consider the image rendered in Figure 7.9.

Figure 7.9: A quadratic Bezier curve and a feTurbulence filter.

The SVG document in Listing 7.9 demonstrates how to combine an feTurbulence filter primitive with an SVG clip-path element.

Listing 7.9 turbulenceFilterQBCP1.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>   <filter            filterUnits="objectBoundingBox"      x="0%" y="0%"      width="100%" height="100%">      <feTurbulence type="turbulence"                    baseFrequency="0.01"                    numOctaves="1"/>   </filter>   <clipPath              clipPathUnits="userSpaceOnUse">     <path d="m0,0 Q100,0 200,200 T300,200"           style="fill:red;stroke:blue;stroke-width:4;"/>   </clipPath> </defs> <g transform="translate(50,50)"   clip-path="url(#clipPathDefinition)"              stroke="black" fill="none">   <rect      x="0" y="0" width="800" height="400"      filter="url(#filter1)"/> </g> </svg>

Remarks

The SVG code in Listing 7.9 combines an feTurbulence filter primitive with an SVG clip-path element that consists of a quadratic Bezier curve; both of these elements are defined inside an SVG defs element. You've already seen the feTurbulence filter primitive in previous examples in this chapter, and the Bezier curve was discussed in Chapter 5. You can use this example as the basis for combining filter primitives with whatever clip path you have at hand in order to create subtle visual effects.

---