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

Specification
Filter Effects Module Level 1
# feTurbulenceElement

Browser compatibility

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

See also

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