<!DOCTYPE html>
<
html
>
<
body
>
<
h2
style="color: green; font-size:30px;
margin-left:10px;">
GeeksforGeeks
</
h2
>
<
p
style
=
"margin-left:30px;"
>
<
b
>SVG filter effects</
b
>
</
p
>
<
svg
viewBox
=
"200 0 720 500"
<
filter
id
=
"filterID"
x
=
"0"
y
=
"0"
width
=
"100%"
height
=
"100%"
>
<
feTurbulence
baseFrequency
=
"0.025"
numOctaves
=
"8"
seed
=
"5"
stitchTiles
=
"stitch"
/>
</
filter
>
<
rect
width
=
"50"
height
=
"50"
style="filter: url(#filterID);
transform: translate(220px, 0);" />
<
rect
width
=
"50"
height
=
"50"
style="filter: url(#filterID);
transform: translate(270px, 0);" />
<
rect
width
=
"50"
height
=
"50"
style="filter: url(#filterID);
transform: translate(220px, 50px);" />
<
rect
width
=
"50"
height
=
"50"
style="filter: url(#filterID);
transform: translate(270px, 50px);" />
</
svg
>
</
body
>
</
html
>