This page is In Progress

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


Overview Table

DOM Interface


This example shows a simple turbulence filter with a baseFrequency value of 0.1 and a numOctaves value of 2.

The image will look like this.

        <svg width="400" height="400">
               <filter id="MyFilter" filterUnits="userSpaceOnUse" x="50" y="50"  width="300" height="300">
                  <feTurbulence baseFrequency="0.1"
                    numOctaves="2" />
            <use filter="url(#MyFilter)" x='0' y='0'/>



Ken Perlin is the author of a set of formulas that provide a way to display turbulence noise. At the time of this writing, an excellent summary is available at

The SVGFETurbulenceElement provides the following properties:


Standards information


The SVGFETurbulenceElement object has these properties:

  • baseFrequencyX: Provides a base frequency in the X direction for the turbulence calculation.
  • baseFrequencyY: Provides a base frequency in the Y direction for the turbulence calculation.
  • height: Gets or sets the height of an element.
  • numOctaves: Provides the number of noise functions to be added together when calculating the turbulence.
  • result: Provides a reference for the output result of a filter.
  • seed: Provides a seed for the random number generator used to create the turbulence.
  • stitchTiles: Provides a way to smooth the tiles generated by the turbulence calculation.
  • type: Indicates whether the filter primitive should perform a noise or turbulence function.
  • width: Defines the width of an element.
  • x: Gets or sets the x-coordinate value.
  • y: Gets or sets the y-coordinate value.

See also

Related articles