The stitchTiles attribute indicates the behavior of the Perlin Noise tiles at the border. Only <feTurbulence> primitive is using this attribute. The feTurbulence is one of the important filter primitive of SVG which helps in simulating natural textures like clouds or smokes and many more.
Syntax:
stitchTiles = stitch | noStitch
Attribute Values: The stitchTiles attribute accepts the values mentioned above and described below.
- stitch: It indicates that the user will automatically adjust the x and y values of the base frequency.
- noStitch: It indicates that no attempt is made to achieve smooth transitions at the border of tiles which contain a turbulence function.
Example 1: Below examples illustrate the use of stitchTiles attribute. SVG feTurbulence filter primitive is used to create own distortion effects. Here noStitch option is used for stitchTiles attribute.
<!DOCTYPE html> < html >
< body >
< h2 style = "color: green; font-size: 40px;" >
GeeksforGeeks
</ h2 >
< p style = "margin-left:30px;" >
< b >SVG filter effects</ b >
</ p >
<!--SVG container for graphical images -->
< svg viewBox = "0 0 620 400" <!--Adding filter element for
special effects -->
< filter id = "filterID1" x = "0" y = "0" width = "100%" height = "100%" >
<!-- feTurbulence to fill the
region with no smoothness-->
< feTurbulence baseFrequency = "0.035" numOctaves = "8" seed = "5" stitchTiles = "noStitch" />
<!-- "noStitch" option is given above
for NO smooth noise-->
</ filter >
<!--Variations of rectangle is used -->
< rect x = "10" y = "0" width = "50" height = "50" style = "filter: url(#filterID1);" />
< rect x = "10" y = "0" width = "50" height = "50" style="filter: url(#filterID1);
transform: translate(50px, 0);" />
<!--translate is used for moving to new
location -->
< rect x = "10" y = "0" width = "50" height = "50" style="filter: url(#filterID1);
transform: translate(0, 50px);" />
< rect x = "10" y = "0" width = "50" height = "50" style="filter: url(#filterID1);
transform: translate(50px, 50px);" />
</ svg >
</ body >
</ html >
|
Output:
Example 2:
<!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" <!-- stitchTiles attribute have values
as "stitch" or "noStitch"-->
< filter id = "filterID" x = "0" y = "0" width = "100%" height = "100%" >
<!-- feTurbulence fills the region
with some content with perlin
turbulence function-->
< feTurbulence baseFrequency = "0.025" numOctaves = "8" seed = "5" stitchTiles = "stitch" />
<!-- "stitch" option is given above
for smooth noise -->
</ filter >
<!-- Variations of rectangle is used -->
< rect width = "50" height = "50" style="filter: url(#filterID);
transform: translate(220px, 0);" />
<!-- Translate is used for moving
to new location -->
< 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 >
|
Output: