Skip to content
Related Articles

Related Articles

SVG stitchTiles Attribute
  • Last Updated : 17 Dec, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :