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.

feTurbulence

Overview Table

DOM Interface
SVGElement

Examples

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.



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

Notes

Remarks

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:

Syntax

Standards information

Members

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

Filters

Attributions