How to use SVG Patterns as the background ?

The SVG Pattern element in HTML is used for drawing the different graphical designs or patterns. The patterns represent a graphical object which is used to redraw the same object repeatedly at x and y co-ordinate intervals to cover an area.

Advantages of using SVG Patterns as background:

  1. It is easy to implement in code and easy to maintain.
  2. They are lightweight, easy to use, specially for beginners.
  3. They are scalable.
  4. They are customisable using CSS for creating a dynamic web page.
  5. The patterns can be generated from basic graphical objects like rectangles, circles, polygons to complex shapes. It is therefore becoming more popular to the developers.

Resources for SVG Patterns Tools: There are many tools or resources from which one can generate different patterns and use them in code. These are easy to use and can be useful for making creative backgrounds as desired.

Some important attributes of the pattern tag are given below:

Syntax:



<pattern id=”id-defined-by-user” x=”x-axis co-ordinate” y=”y-axis co-ordinate” width=”width-of-pattern” height=”height-of-pattern” patternUnits=”units to define x,y, width and height attributes” xlink:href=”link to another pattern” preserveAspectRatio=”preserving aspect ratio of original content” >
</pattern>

Example 1: In this example, the pattern is repeated to create the whole background. Within the pattern tag, an id is assigned that can be referred to as the pattern id. It can be useful as this pattern could be easily used later on in code by referring to this id.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .patterns {
            background-color: #2e4057;
            margin: 1%;
            height: 100vh;
        }
    </style>
</head>
  
<body>
    <h3 style="color:green;text-align: center;">
        GeeksforGeeks
    </h3>
    <div class="patterns">
        <svg width="100%" height="100%">
            <!-- Definition for the SVG -->
            <defs>
                <!-- Design of the pattern -->
                <pattern id="b-design" x="0" y="0" 
                    width="50" height="50" 
                    patternUnits="userSpaceOnUse">
                    <circle fill="#bee9e7" 
                        cx="0" cy="0" r="10" />
                </pattern>
            </defs>
            <rect x="0" y="0" width="100%" 
                height="100%" fill="url(#b-design)" />
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output: 
 

Example 2: In this example, the pattern is created using a path, which is specified using its ‘id’ attribute. The height, width, fill-color, background color and other parameters are set after defining the pattern.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .patterns {
            background-color: #2e4057;
            height: 100vh;
        }
    </style>
</head>
  
<body>
    <h3 style="color:green;text-align: center;">
        GeeksforGeeks
    </h3>
    <div class="patterns">
        <svg width="100%" height="100%">
            <defs>
                <!-- Define the pattern -->
                <pattern id="pie-design" x="0" y="0" 
                    width="60" height="70" 
                    patternUnits="userSpaceOnUse">
  
                    <!-- Use the path element 
                         for the design -->
                    <path fill="#8cf790" d=
            "M29 58.58l7.38-7.39A30.95 30.95 0 0
            1 29 37.84a30.95 30.95 0 0 1-7.38 13.36l7.37
            7.38zm1.4 1.41l.01.01h-2.84l-7.37-7.38A30.95
            30.95 0 0 1 6.84 60H0v-1.02a28.9 28.9 0 0 0
            18.79-7.78L0 32.41v-4.84L18.78 8.79A28.9
            28.9 0 0 0 0 1.02V0h6.84a30.95 30.95 0
            0 1 13.35 7.38L27.57 0h2.84l7.39 7.38A30.95
            30.95 0 0 1 51.16 0H60v27.58-.01V60h-8.84a30.95
            30.95 0 0 1-13.37-7.4L30.4 60zM29 1.41l-7.4
            7.38A30.95 30.95 0 0 1 29 22.16 30.95 30.95
            0 0 1 36.38 8.8L29 1.4zM58 1A28.9 28.9 0 0 0
            39.2 8.8L58 27.58V1.02zm-20.2 9.2A28.9 28.9
            0 0 0 30.02 29h26.56L37.8 10.21zM30.02
            31a28.9 28.9 0 0 0 7.77 18.79l18.79-18.79H30.02zm9.18
            20.2A28.9 28.9 0 0 0 58 59V32.4L39.2 
            51.19zm-19-1.4a28.9 28.9 0 0 0 7.78-18.8H1.41l18.8
            18.8zm7.78-20.8A28.9 28.9 0 0 0 20.2 10.2L1.41
            29h26.57z">
                    </path>
                </pattern>
            </defs>
            <rect x="0" y="0" width="100%" 
                height="100%" 
                fill="url(#pie-design)" />
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output: 
 

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.