feGaussianBlur Filter Triangles and Checkerboards

---

List of SVG Filter Primitives

The SVG filter primitives in this chapter give you a sample of what SVG can offer, but it is by no means an exhaustive list. If you want to see the complete list of SVG filter primitives, you can find them in Chapter 15 of the SVG specification. The list of filter primitives is reproduced below:

feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLIghting feDisplacementMap feFlood feGaussianBlur feImage feMerge feMorphology feOffset feSpecularLighting feTile feTurbulence

Key Constructs

Apply an feGaussianBlur filter primitive to a rectangle with the following SVG snippet:

<defs>  <filter          filterUnits="objectBoundingBox"     x="0" y="0"     width="100%" height="100%">     <feGaussianBlur stdDeviation="8"/>  </filter>  </defs> <g transform="translate(50,50)">  <rect     x="0" y="0" width="100" height="100"     filter="url(#blurFilter1)"     fill="red" stroke="black" stroke-width="4"/> </g>

Apply an feFlood filter primitive to a rectangle with the following SVG snippet:

 <defs>   <filter            filterUnits="objectBoundingBox"      x="0" y="0"      width="100%" height="100%">      <feFlood flood-color="blue" flood-opacity="1"/>   </filter>   <rect       width="100" height="100"      fill="red" stroke="black" stroke-width="4"/>   </defs> <g transform="translate(50,50)">   <use xlink:href="#refRect1" x="50" y="50"/>   <rect      x="0"   y="0" width="100" height="100"      filter="url(#floodFilter1)"      fill="red" stroke="black" stroke-width="4"/> </g>

Apply an feTurbulence filter primitive to a rectangle with the following SVG snippet:

<defs>   <filter            filterUnits="objectBoundingBox"      x="0%" y="0%"      width="100%" height="100%">      <feTurbulence type="turbulence"                    baseFrequency="0.01"                    numOctaves="1"/>   </filter>   </defs>   <rect      x="0" y="0" width="800" height="400"      filter="url(#filter1)"/> </svg>

---