The feTurbulence element for SVG specifies 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 for this filter primitive.
Specifies the base frequency (frequencies) parameter(s) for the noise function.
If two numbers are provided, the first number represents a base frequency in the x direction and the second value represents a base frequency in the y direction. If one number is provided, then that value is used for both x and y. Negative values are unsupported.
Specifies the number of octaves for the noise function.
Negative values are unsupported.
Specifies the starting number for the pseudo random number generator.
Specifies the transition at the border of tiles.
Specifies whether the filter primitive should perform a noise or turbulence function.
fractalNoise | turbulence
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid1">
<feTurbulence baseFrequency="0.1" numOctaves="2"/>
</filter>
<filter id="myid2">
<feTurbulence baseFrequency="0.1" numOctaves="2" result="myresult"/>
<feDisplacementMap in="SourceGraphic" in2="myresult" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid1)" r="50vh"/>
<circle cx="50%" cy="50%" filter="url(#myid2)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid1">
<feTurbulence baseFrequency="0.1" seed="2"/>
</filter>
<filter id="myid2">
<feTurbulence baseFrequency="0.1" result="myresult" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="myresult" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid1)" r="50vh"/>
<circle cx="50%" cy="50%" filter="url(#myid2)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid1" width="100%">
<feTurbulence baseFrequency="0.01" stitchTiles="noStitch"/>
</filter>
<filter id="myid2" width="100%">
<feTurbulence baseFrequency="0.01" result="myresult" stitchTiles="noStitch"/>
<feDisplacementMap in="SourceGraphic" in2="myresult" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid1)" r="25vw" style="transform: translate(-50vw)"/>
<circle cx="50%" cy="50%" filter="url(#myid1)" r="25vw"/>
<circle cx="50%" cy="50%" filter="url(#myid1)" r="25vw" style="transform: translate(50vw)"/>
<circle cx="50%" cy="50%" filter="url(#myid2)" r="25vw" style="transform: translate(-50vw)"/>
<circle cx="50%" cy="50%" filter="url(#myid2)" r="25vw"/>
<circle cx="50%" cy="50%" filter="url(#myid2)" r="25vw" style="transform: translate(50vw)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid1" width="100%">
<feTurbulence baseFrequency="0.01" stitchTiles="stitch"/>
</filter>
<filter id="myid2" width="100%">
<feTurbulence baseFrequency="0.01" result="myresult" stitchTiles="stitch"/>
<feDisplacementMap in="SourceGraphic" in2="myresult" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid1)" r="25vw" style="transform: translate(-50vw)"/>
<circle cx="50%" cy="50%" filter="url(#myid1)" r="25vw"/>
<circle cx="50%" cy="50%" filter="url(#myid1)" r="25vw" style="transform: translate(50vw)"/>
<circle cx="50%" cy="50%" filter="url(#myid2)" r="25vw" style="transform: translate(-50vw)"/>
<circle cx="50%" cy="50%" filter="url(#myid2)" r="25vw"/>
<circle cx="50%" cy="50%" filter="url(#myid2)" r="25vw" style="transform: translate(50vw)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid1">
<feTurbulence baseFrequency="0.1" type="fractalNoise"/>
</filter>
<filter id="myid2">
<feTurbulence baseFrequency="0.1" result="myresult" type="fractalNoise"/>
<feDisplacementMap in="SourceGraphic" in2="myresult" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid1)" r="50vh"/>
<circle cx="50%" cy="50%" filter="url(#myid2)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid1">
<feTurbulence baseFrequency="0.1" type="turbulence"/>
</filter>
<filter id="myid2">
<feTurbulence baseFrequency="0.1" result="myresult" type="turbulence"/>
<feDisplacementMap in="SourceGraphic" in2="myresult" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid1)" r="50vh"/>
<circle cx="50%" cy="50%" filter="url(#myid2)" r="50vh"/>
</svg>