W3cubDocs

/SVG

<feTurbulence>

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

Categories Filter primitive element
Permitted content Any 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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
feTurbulence Yes 12
12
Partially supported, see bug 12382004.
4 Yes
Yes
Partially supported, see bug 12382004.
9 ?
baseFrequency Yes 12
12
Partially supported, see bug 12382004.
4 Yes
Yes
Partially supported, see bug 12382004.
9 ?
numOctaves ? ? ? ? ? ?
seed Yes 12
12
Partially supported, see bug 12382004.
4 Yes
Yes
Partially supported, see bug 12382004.
9 ?
stitchTiles ? ? ? ? ? ?
type ? ? ? ? ? ?
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
feTurbulence Yes Yes Yes Yes ? Yes
baseFrequency Yes Yes Yes Yes ? Yes
numOctaves ? ? ? ? ? ?
seed Yes Yes Yes Yes ? Yes
stitchTiles ? ? ? ? ? ?
type ? ? ? ? ? ?

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence