SVG stitchTiles Attribute

Last Updated : 31 Mar, 2022

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.

HTML

<!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" 
        xmlns="http://www.w3.org/2000/svg"> 
  
        <!--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:

HTML

<!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" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <!-- 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>  