SVG <feTurbulence> Element (original) (raw)

Last Updated : 31 Mar, 2022

The SVG filter generates noise which is helpful in simulating several natural phenomena like clouds, fire, and smoke, and in generating complex texture like marble or granite. The noise can be used to distort images and text. Perlin Turbulence function is used to generate Perlin Noise.Syntax:

Attributes:

• type: It has two values i.e. turbulence/fractalNoise. Default value is turbulence.
• baseFrequency: It affects the size (or scale) and the grain of the generated noise. Default value is 0.
• numOctaves: It defines the frequency or detail of noise. Default value is 1.
• seed: It provides a different starting number for the random function.
• stitchTiles: It is used to create a stitching effect when you have two adjacent areas of noise. It defines the behavior of perlin noise at the border and corners.

Example 1:

html `

<svg width="400" height="400" 
    viewBox="0 0 250 250">

    <filter id="FillPaint">

        <feTurbulence type="fractalNoise" 
            baseFrequency="2" numOctaves="2" 
            seed="1" stitchTiles="nostitch"
            result="turbulence" />

        <feDisplacementMap in2="turbulence" 
            in="SourceGraphic" scale="50" 
            xChannelSelector="B"
            yChannelSelector="B" />

    </filter>
    
    <ellipse cx="100" cy="60" rx="100" 
        ry="50" style=" fill: green; 
        filter: url(#FillPaint);" />
</svg>

`

Output:

Example 2:

html `

<svg width="200" height="200" 
    viewBox="0 0 220 220">

    <filter id="FillPaint">

        <feTurbulence type="Turbulence" 
            baseFrequency="0.5" numOctaves="2" 
            seed="5" stitchTiles="stitch" />

        <feDisplacementMap in2="turbulence" 
            in="SourceGraphic" scale="50" 
            xChannelSelector="B"
            yChannelSelector="B" />

    </filter>
    
    <rect width="200" height="200" 
        style=" fill:green;
        filter: url(#FillPaint);" />
</svg>

`

Output: