feTurbulence

This page has been flagged with the following issues:

High-level issues:

Content:

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

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.

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	?	?	?	?	?

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic support	?	?	?	?	?	?	?	?

Search

feTurbulence

How to Use

feTurbulence

Overview Table

Examples

Notes

Remarks

Syntax

Standards information

Members

Compatibility

Desktop

Mobile

See also

Related articles

Filters