feGaussianBlur Filter Triangles and Quadratic Bezier Curves | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

feGaussianBlur Filter Triangles and Checkerboards

Consider the image rendered in Figure 7.11.

click to expand
Figure 7.11: feGaussianBlur filter triangles and a checkerboard Pattern.

The SVG document in Listing 7.11 demonstrates how to combine an feGaussianBlur filter primitive, a quadratic Bezier curve, and a checkerboard pattern that is based on an SVG pattern element.

Listing 7.11 blurTriangleCheckerBoard1.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%">      <feGaussianBlur stdDeviation="8"/>   </filter>   <pattern             width="80" height="80"            patternUnits="userSpaceOnUse">      <rect fill="red"            x="0"  y="0"  width="40" height="40"/>      <polygon         points="0,0 40,0 40,40"         filter="url(#blurFilter1)"         fill="blue" stroke="black" stroke-width="4"/>      <rect fill="blue"            x="40" y="0"  width="40" height="40"/>      <polygon         points="40,0 80,0 80,40"         filter="url(#blurFilter1)"         fill="red" stroke="black" stroke-width="4"/>      <rect fill="blue"            x="0"  y="40" width="40" height="40"/>      <polygon         points="0,40 40,40 40,80"         filter="url(#blurFilter1)"         fill="red" stroke="black" stroke-width="4"/>      <rect fill="red"            x="40" y="40" width="40" height="40"/>      <polygon         points="40,40 80,40 80,80"         filter="url(#blurFilter1)"         fill="blue" stroke="black" stroke-width="4"/>   </pattern>   </defs> <g transform="translate(50,50)">   <rect      fill="url(#checkerPattern)"      style="stroke:white"      x="0" y="0" width="400" height="400"/> </g> </svg>

Remarks

The SVG code in Listing 7.11 contains an SVG defs element that defines two familiar elements: an feGaussianBlur filter primitive and an SVG pattern element consisting of a 'checkerboard' of triangles that are rendered with the feGaussianBlur filter applied to it.

Listing 7.11 is actually quite straightforward, despite the fact that it's longer than the other examples in this chapter. The reason for the apparent complexity is due to the SVG pattern element-it contains four SVG rect elements and four SVG polygon elements, each of which reference an SVG blur filter that is also defined in the enclosing SVG defs element.

The graphics image rendered by Listing 7.11 resembles a grid of triangles that have been daubed with paint. The unexpectedly rich textural pattern of red-on-blue that alternates with blue-on-red somehow creates a 'warm and fuzzy' effect.