Open In App

How to Animate SVG with border-image using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Scalable Vector Graphics or SVG is used to set vector-based graphics for the web. In this article, we will learn how to animate an SVG with border-image using CSS.

Approach: Using the border-image property, there is an SVG element within which a rect element is defined to represent a rectangle of a set width and height. The border-image for this SVG is another SVG element specified as a URL (Uniform Resource Locator) to the border-image property. This can be achieved by encoding the border-image SVG as a data URI. The new border-image SVG element is animated by defining the inline CSS for the same.

Note: A data URI (Uniform Resource Identifier) is a base64 encoded string that represents a file (i.e., instead of specifying the URL of the file, you can insert the content of the file in a webpage).

Example 1: In this example, we will use above the approach.

Animated Border SVG:

<svg width="100" height="100" viewBox="00100100" 
    fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>
        path {
            animation: stroke 5s infinite linear;
        }

        @keyframes stroke {
            to {
                stroke-dashoffset: 776;
            }
        }
    </style>

    <linearGradient id="g" x1="0%" y1="0%" x2="0%" 
        y2="100%" stopoffset="0%" stop-color="#24FE41" 
        stopoffset="25%" stop-color="#24FE41" 
        stopoffset="50%" stop-color="#38ef7d" 
        stopoffset="100%" stop-color="#38ef7d">
    </linearGradient>

    <path d="M1.51.5l970l097l-970l0-97" 
        stroke-linecap="square" stroke="url(#g)" 
        stroke-width="3" stroke-dasharray="385" />
</svg>

Data URI of the animated border SVG:

data:image/svg+xml;charset=utf-8,%3Csvg width=’100′ height=’100′ viewBox=’0 0 100 100′ fill=’none’ xmlns=’http://www.w3.org/2000/svg’%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id=’g’ x1=’0%25′ y1=’0%25′ x2=’0%25′ y2=’100%25’%3E%3Cstop offset=’0%25′ stop-color=’%2324FE41′ /%3E%3Cstop offset=’25%25′ stop-color=’%2324FE41′ /%3E%3Cstop offset=’50%25′ stop-color=’%2338ef7d’ /%3E%3Cstop offset=’100%25′ stop-color=’%2338ef7d’ /%3E%3C/linearGradient%3E %3Cpath d=’M1.5 1.5 l97 0l0 97l-97 0 l0 -97′ stroke-linecap=’square’ stroke=’url(%23g)’ stroke-width=’3′ stroke-dasharray=’385’/%3E %3C/svg%3E

Filename: index.html

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- jQuery -->
    <script src=
    </script>
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
            font-size: 2.5rem;
        }
        svg {
            background: green;
            margin: 0 auto;
            border: 12.5px solid black;
            border-image: url(
"data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2324FE41' /%3E%3Cstop offset='25%25' stop-color='%2324FE41' /%3E%3Cstop offset='50%25' stop-color='%2338ef7d' /%3E%3Cstop offset='100%25' stop-color='%2338ef7d' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='385'/%3E %3C/svg%3E") 1;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>  
    <svg width="160" height="160">
        <rect width="160" height="160"
            style="fill: green" />
    </svg>
</body>
</html>


Output:

Example 2: This example is quite similar to the previous example but the only difference is that the stroke-dasharray value is simply 50 instead of 385 which adds more dashes in the border-image. Moreover, the animation alternates between the forwards’ direction and the reverse direction.

Animated Border SVG:

<svg width="100" height="100" viewBox="00100100" 
    fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>
        path {
            animation: stroke 5s linear alternate infinite;
        }

        @keyframes stroke {
            to {
                stroke-dashoffset: 776;
            }
        }
    </style>
    <linearGradient id="g" x1="0%" y1="0%" x2="0%" 
        y2="100%" stopoffset="0%" stop-color="#24FE41" 
        stopoffset="25%" stop-color="#24FE41" 
        stopoffset="50%" stop-color="#38ef7d" 
        stopoffset="100%" stop-color="#38ef7d">
    </linearGradient>

    <path d="M1.51.5l970l097l-970l0-97" 
        stroke-linecap="square" stroke="url(#g)" 
        stroke-width="3" stroke-dasharray="50" />
</svg>

Data URI of the animated border SVG:

data:image/svg+xml;charset=utf-8,%3Csvg width=’100′ height=’100′ viewBox=’0 0 100 100′ fill=’none’ xmlns=’http://www.w3.org/2000/svg’%3E %3Cstyle%3Epath%7Banimation:stroke 5s linear alternate infinite%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id=’g’ x1=’0%25′ y1=’0%25′ x2=’0%25′ y2=’100%25’%3E%3Cstop offset=’0%25′ stop-color=’%2324FE41′ /%3E%3Cstop offset=’25%25′ stop-color=’%2324FE41′ /%3E%3Cstop offset=’50%25′ stop-color=’%2338ef7d’ /%3E%3Cstop offset=’100%25′ stop-color=’%2338ef7d’ /%3E%3C/linearGradient%3E %3Cpath d=’M1.5 1.5 l97 0l0 97l-97 0 l0 -97′ stroke-linecap=’square’ stroke=’url(%23g)’ stroke-width=’3′ stroke-dasharray=’50’/%3E %3C/svg%3E

Filename: index.html

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- jQuery -->
    <script src=
    </script>
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
            font-size: 2.5rem;
        }
        svg {
            background: green;
            margin: 0 auto;
            border: 12.5px solid black;
            border-image: url(
"data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s linear alternate infinite%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2324FE41' /%3E%3Cstop offset='25%25' stop-color='%2324FE41' /%3E%3Cstop offset='50%25' stop-color='%2338ef7d' /%3E%3Cstop offset='100%25' stop-color='%2338ef7d' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='50'/%3E %3C/svg%3E") 1;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <svg width="160" height="160">
        <rect width="160" height="160"
            style="fill: green" />
    </svg>
</body>
</html>


Output:



Last Updated : 17 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads