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

Scalable Vector Graphics: Filter Effects, Section 15.25.27

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.

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]