How to Animate SVG with border-image using CSS ?
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 >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...