feTurbulence filter primitive


type: fractalNoise or turbulence

for each type:

  • baseFrequency: two positives values for x and y.
  • numOctaves: positive integer
  • seed: positive integer ( change random colors )
  • Using pattern, you can fill shape with texture.

    Example of code using feTurbulence to create pattern and fill shape:

        <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
           <feTurbulence type="fractalNoise" baseFrequency="0.01,0.1" numOctaves="4" seed='1'/>
        <pattern id="motif" patternUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
           <use filter="url(#MyFilter)"/>
    <circle cx='200' cy='200' r='200' style='stroke:black;fill:url(#motif)'/>

    Figure 1: Result for some values of parameters

    Figure 2: Some examples with feTurbulence and feColorMatrix

    Figure 3: Some examples with feTurbulence and feComponentTransfer


    Tools: you can change parameters and type to see texture 
             add feComponentTransfer filter to change colors of texture
             add feColorMatrix filter to change colors of texture
             using feTurbulence and fecomposite to change picture

    Examples : some examples with different values for parameters as SVG
                   some examples with feComponentTransfer as SVG
                   some examples with feColorMatrix as SVG
                   some animations about texture
                  animation with feDisplacementMap to delay text

    FrontPage  feColorMatrix  feComponentTransfer  feSpecularLightning feDiffuseLightning  feSpotLight  feDistantLight  fePointLight  feFlood  feImage   feTurbulence   feTile  feMerge  feBlend  feComposite feGaussianBlur  feMorphology  feConvolveMatrix  feDisplacementMap  feOffset

    Valid XHTML 1.0!