feTurbulence element | SVGFETurbulenceElement object

Provides a filter to create images based on the Perlin turbulence function.

Scalable Vector Graphics: Filter Effects, Section 15.25.27

Syntax


 <feTurbulence type="turbulence" baseFrequency="number" numOctaves="number"/>

DOM Information

Inheritance Hierarchy

Node

Element

SVGElement

SVGFETurbulenceElement

Members

The SVGFETurbulenceElement object has these types of members:

Properties

Properties

The SVGFETurbulenceElement object has these properties.

Property	Access type	Description
baseFrequencyX	Read-only	Provides a base frequency in the X direction for the turbulence calculation.
baseFrequencyY	Read-only	Provides a base frequency in the Y direction for the turbulence calculation.
height		Gets or sets the height of an element.
numOctaves	Read-only	Provides the number of noise functions to be added together when calculating the turbulence.
result	Read-only	Provides a reference for the output result of a filter.
seed	Read-only	Provides a seed for the random number generator used to create the turbulence.
stitchTiles	Read-only	Provides a way to smooth the tiles generated by the turbulence calculation.
type	Read-only	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.

Standards information

Scalable Vector Graphics: Filter Effects, Section 15.25.27

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:

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>