Open In App

How to use SVG Patterns as the background ?

Improve
Improve
Like Article
Like
Save
Share
Report

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




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


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




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


Output: 
 



Last Updated : 11 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads