< svg‎ | elements
Jump to: navigation, search


This article is In Progress.

Needs Summary: This article does not have a summary. Summaries give a brief overview of the topic and are automatically included on some listing pages that link to this article.

Overview Table

DOM Interface SVGElement


There is no data available for topic "svg", feature "feTurbulence". If you think that there should be data available, consider opening an issue.


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 http://freespace.virgin.net/hugo.elias/models/m_perlin.htm.

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


  • feTurbulence


This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]