Share this Page URL

Hour 10. Using Filters > Creating Textures with feTurbulence - Pg. 120

Using Filters 120 36: <use id="SunCloud1" xlink:href="#Cloud" x="-20" y="80" class="FillFFFFFF"/> 37: <use id="SunCloud2" xlink:href="#Cloud" x="150" y="150" class="FillFFFFFF"/> 38: <circle id="Sun" cx="105" cy="160" r="56" class="FillFFFF00 FilterDropShadow"/ > 39: 40: </svg> By naming the result of each filter effect shadow, you can add effects one by one to the same value. You can, however, name the result of each effect differently. In such cases, the appropriate in value would need to be modified to match the previous effect's result. Creating Textures with feTurbulence Creating noise, marble, or cloud effects across an image requires using the feTurbulence prim- itive. feTurbulence creates a texture-like pattern on an object using a variety of custom properties. Somewhat oddly, feTurbulence has two different functions (specified by the type attribute): tur- bulence and noise. The turbulence value creates soft, bubble-like patterns that appear as pris- matic clouds, whereas fractalNoise creates a randomized dot texture, similar to gravel or snow being tossed across the image. feTurbulence has three major attributes to determine the result of the effect: type, numOc- taves, and baseFrequency. type allows you to choose between the noise and turbulence op- tions, using the respective values fractalNoise and turbulence. baseFrequency accepts a numerical value to designate the amount of noise or turbulence to apply, whereas numOctaves uses a number to determine the amount of variance from the baseFrequency value (the greater the number, the greater the variance).