The numOctaves attribute defines the number of octaves for the noise function of the <feTurbulence> primitive. Only <feTurbulence> element is using this attribute.
Syntax:
numOctaves = "integer"
Attribute Values: The numOctaves attribute accepts the values mentioned above and described below
- integer: This value shows the number of octaves.
Example 1: Below example illustrate the use of the numOctaves attribute.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg width="200" height="200"
viewBox="0 0 220 220"
xmlns="https://www.w3.org/2000/svg">
<filter id="geek1">
<feTurbulence baseFrequency="0.05"
numOctaves="1" result="turbulence" />
<feDisplacementMap in2="turbulence"
in="SourceGraphic" scale="50"
xChannelSelector="R"
yChannelSelector="G" />
</filter>
<circle cx="100" cy="100" r="100"
fill="green" style="filter: url(#geek1)" />
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<div style="color: green;
margin-left: 50px;">
<h1>GeeksforGeeks</h1>
<svg viewBox="0 0 480 100"
xmlns="https://www.w3.org/2000/svg">
<filter id="geek2" x="-20%"
y="-20%" width="150%"
height="150%">
<feTurbulence type="turbulence"
baseFrequency="0.05"
numOctaves="5"
result="turbulence" />
<feDisplacementMap in2="turbulence"
in="SourceGraphic" scale="20" />
</filter>
<polygon points=
"50, 9 60.5, 39.5 92.7, 40.1 67,
59.5 76.4, 90.3 50, 71.9 23.6,
90.3 32.9, 59.5 7.2, 40.1 39.4, 39.5"
style="filter: url(#geek2);"
fill="hsl(106, 80%, 50%)" />
</svg>
</div>
</body>
</html>
Output:
