The <feTurbulence> SVG filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion.

Usage context

CategoriesFilter primitive element
Permitted contentAny number of the following elements, in any order:
<animate>, <set>

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGFETurbulenceElement interface.

Example

<svg width="200" height="200" viewBox="0 0 220 220"
     xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feTurbulence type="turbulence" baseFrequency="0.05"
        numOctaves="2" result="turbulence"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="50" xChannelSelector="R" yChannelSelector="G"/>
  </filter>

  <circle cx="100" cy="100" r="100"
      style="filter: url(#displacementFilter)"/>
</svg>

Specifications

Specification Status Comment
Filter Effects Module Level 1
The definition of '<feTurbulence>' in that specification.
Working Draft No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<feTurbulence>' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support Yes
Notes
Full support Yes
Notes
Notes Partially supported, see bug 12382004.
Firefox Full support 4IE Full support Yes
Notes
Full support Yes
Notes
Notes Partially supported, see bug 12382004.
Opera Full support 9Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support Yes
Notes
Full support Yes
Notes
Notes Partially supported, see bug 12382004.
Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
baseFrequencyChrome Full support YesEdge Full support Yes
Notes
Full support Yes
Notes
Notes Partially supported, see bug 12382004.
Firefox Full support 4IE Full support Yes
Notes
Full support Yes
Notes
Notes Partially supported, see bug 12382004.
Opera Full support 9Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support Yes
Notes
Full support Yes
Notes
Notes Partially supported, see bug 12382004.
Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
numOctavesChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
seedChrome Full support YesEdge Full support Yes
Notes
Full support Yes
Notes
Notes Partially supported, see bug 12382004.
Firefox Full support 4IE Full support Yes
Notes
Full support Yes
Notes
Notes Partially supported, see bug 12382004.
Opera Full support 9Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support Yes
Notes
Full support Yes
Notes
Notes Partially supported, see bug 12382004.
Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
stitchTilesChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
typeChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also

Document Tags and Contributors

Last updated by: fscholz,