SVG <feTurbulence> Filter

The <feTurbulence>element is used to fill the rectangle with the new content. It allows you to produce the artificial textures for effects like marble, clouds.

It has five specific attributes:

type
numOctaves
seed
baseFrequency
stitchTiles.

type

The<feTurbulence> element has two values of type: turbulence and fractalNoise. Turbulence appears the stringier and fractalNoise looks cloudier. The default value of type is turbulence.

Example

<!DOCTYPE html>
<html>
<body>
<svg height="900" width="900">

<filter id="T2">
<feTurbulence baseFrequency=".06" type="fractalNoise"/>
</filter>
<rect x="30" y="10" height="100" width="100" filter="url(#T2)"/>

</svg>
</body>
</html>

Test it Now

numOctaves

It is the number of noise functions that should be added together when generating the final result.

Its default value is one. The larger this number shows the more fine-grained texture.

Example

<!DOCTYPE html>
<html>
<body>
<svg height="900" width="900">

<filter id="T2">
<feTurbulence baseFrequency=".04" numOctaves="1" />
</filter>
<rect x="80" y="40" height="150" width="150" filter="url(#T2)"/>

</svg>
</body>
</html>

Test it Now

seed

The <feTurbulence>accepts a seed value that allows different scenes of the same characteristics to be generated from instance to instance.

Its default value is zero.

Example

<!DOCTYPE html>
<html>
<body>
<svg height="900" width="900">

<filter id="T2">
<feTurbulence baseFrequency=".02" seed="15" />
</filter>
<rect x="30" y="10" height="100" width="100" filter="url(#T2)"/>

</svg>
</body>
</html>

Test it Now

baseFrequency

The baseFrequency is used to control the scale or frequency of the noise. The value of baseFrequency must be greater than zero and should be less than one.

This attribute have two numbers. First number shows the frequency in the x direction and the second number shows the frequency in the y direction.

Example

<!DOCTYPE html>
<html>
<body>
<svg height="900" width="900">

<filter id="T1">
<feTurbulence baseFrequency=".06"/>
</filter>
<rect x="30" y="10" height="100" width="100" filter="url(#T1)"/>

</svg>
</body>
</html>

Test it Now

Next TopicSVG feFlood Filter

← prev next →