SVG stitchTiles Attribute

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>

Output:

SVG stitchTiles Attribute

Explore