SVG <feTurbulence> Filter

Last Updated:

What is <feTurbulence> Filter?

The <feTurbulence> SVG filter primitive creates an image which is the synthesis of artificial textures like marble or clouds. The output image will fill the entire filter primitive subregion.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <filter id="point"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G"/> </filter> <circle cx="75" cy="75" r="70" style="fill:green;filter: url(#point)"/> </svg> </body> </html>

Attributes Value

AttributeExplanation
baseFrequency Specifies the base frequency parameter for the noise function.
numOctaves Specifies the number of octaves for the noise function.
seed Specifies the starting number for the pseudo random number generator.
stitchTiles Specifies how the Perlin Noise tiles behave at the border.
type Specifies whether the filter primitive should perform a noise or turbulence function.

Share this Page

Meet the Author