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.
HTML
<!DOCTYPE html> < html >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< svg width = "200" height = "200" viewBox = "0 0 220 220" < 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:
HTML
<!DOCTYPE html> < html >
< body >
< div style="color: green;
margin-left: 50px;">
< h1 >GeeksforGeeks</ h1 >
< svg viewBox = "0 0 480 100" < 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: