This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.


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