Animating SVG gradient border Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!XPointers in SVGHow do I combine a background-image and CSS3 gradient on the same element?SVG viewBox to VML coordorigin/coordsizedefault stroke and fill in SVGAnimating variable width svg pathAnimated SVG, circle stroke hoverHow to draw an infinity symbol in SVG format with stroke not fill?Svg path fill with animationSVG fill-rule cutout with different stroke widthsimagemagick - convert does not work with use xlink:href in SVG - possible?
How do I find out the mythology and history of my Fortress?
Strange behavior of Object.defineProperty() in JavaScript
Google .dev domain strangely redirects to https
Why weren't discrete x86 CPUs ever used in game hardware?
What to do with repeated rejections for phd position
Central Vacuuming: Is it worth it, and how does it compare to normal vacuuming?
The test team as an enemy of development? And how can this be avoided?
Why do aircraft stall warning systems use angle-of-attack vanes rather than detecting airflow separation directly?
How to compare two different files line by line in unix?
Converted a Scalar function to a TVF function for parallel execution-Still running in Serial mode
How does Belgium enforce obligatory attendance in elections?
Semigroups with no morphisms between them
Why can't I install Tomboy in Ubuntu Mate 19.04?
How does light 'choose' between wave and particle behaviour?
How long can equipment go unused before powering up runs the risk of damage?
Do I really need to have a message in a novel to appeal to readers?
In musical terms, what properties are varied by the human voice to produce different words / syllables?
How could we fake a moon landing now?
How can I set the aperture on my DSLR when it's attached to a telescope instead of a lens?
One-one communication
Project Euler #1 in C++
What does it mean that physics no longer uses mechanical models to describe phenomena?
Misunderstanding of Sylow theory
Karn the great creator - 'card from outside the game' in sealed
Animating SVG gradient border
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!XPointers in SVGHow do I combine a background-image and CSS3 gradient on the same element?SVG viewBox to VML coordorigin/coordsizedefault stroke and fill in SVGAnimating variable width svg pathAnimated SVG, circle stroke hoverHow to draw an infinity symbol in SVG format with stroke not fill?Svg path fill with animationSVG fill-rule cutout with different stroke widthsimagemagick - convert does not work with use xlink:href in SVG - possible?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I'm trying to make a loading animation with an irregular shape. The top shape is the vector object and the bottom is a single frame of the animation. I would like the gradient to animation in an infinite looping circle. Is this possible?
Here is the SVG code for the shape
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>
css svg css-animations svg-animate
edited Mar 12 at 4:54
Duannx
3,6681536
asked Mar 8 at 21:51
colindunncolindunn
1,46283462
add a comment |
1
I'm trying to make a loading animation with an irregular shape. The top shape is the vector object and the bottom is a single frame of the animation. I would like the gradient to animation in an infinite looping circle. Is this possible?
Here is the SVG code for the shape
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>
css svg css-animations svg-animate
edited Mar 12 at 4:54
Duannx
3,6681536
asked Mar 8 at 21:51
colindunncolindunn
1,46283462
add a comment |
1
1
1
1
I'm trying to make a loading animation with an irregular shape. The top shape is the vector object and the bottom is a single frame of the animation. I would like the gradient to animation in an infinite looping circle. Is this possible?
Here is the SVG code for the shape
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>
css svg css-animations svg-animate
edited Mar 12 at 4:54
Duannx
3,6681536
asked Mar 8 at 21:51
colindunncolindunn
1,46283462
I'm trying to make a loading animation with an irregular shape. The top shape is the vector object and the bottom is a single frame of the animation. I would like the gradient to animation in an infinite looping circle. Is this possible?
Here is the SVG code for the shape
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>
css svg css-animations svg-animate
css svg css-animations svg-animate
edited Mar 12 at 4:54
Duannx
3,6681536
asked Mar 8 at 21:51
colindunncolindunn
1,46283462
edited Mar 12 at 4:54
Duannx
3,6681536
asked Mar 8 at 21:51
colindunncolindunn
1,46283462
edited Mar 12 at 4:54
Duannx
3,6681536
edited Mar 12 at 4:54
Duannx
3,6681536
edited Mar 12 at 4:54
Duannx
3,6681536
3,6681536
asked Mar 8 at 21:51
colindunncolindunn
1,46283462
asked Mar 8 at 21:51
colindunncolindunn
1,46283462
asked Mar 8 at 21:51
colindunncolindunn
1,46283462
1,46283462
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Here you go!
path
stroke-dasharray: 30 139;
stroke-dashoffset: 0;
animation: spin 1s linear infinite;
stroke-width: 3;
@keyframes spin
0%
stroke-dashoffset: 0;
100%
stroke-dashoffset: -169;
<!-- Simple stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>
<!-- Simple gradient stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Simple gradient. Notice to x1, x2, y1, y2.
These values decide the direction of gradient. Gradient go from (x1,y1) to (x2,y2) -->
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient1)" stroke-width="2" fill="none"/>
</svg>
<!-- Gradient stroke that animate along with the animation. -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="1">
<!-- Change the value of x1,x2,y1,y2 during animation to change the direction of gradient.
Expected result: (x1,y1): (0,0) -> (1,0) -> (1,1) -> (0,1) -> (0,0)
(x2,y2): (1,1) -> (0,1) -> (0,0) -> (0,1) -> (1,1) -->
<animate attributeType="XML" attributeName="x1"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y1"
values="0; 0; 1; 1; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="x2"
values="1; 0; 0; 1; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y2"
values="1; 1; 0; 0; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient2)" stroke-width="2" fill="none"/>
</svg>Explanation: The key of that animation is playing with stroke-dasharray and stroke-dashoffset. stroke-dasharray: 30 139;. 30 is the length of the path that shows and moves to make animation. You can change it to whatever you want. 169 is total length of your path so 139 is the result of 169 - 30.
Then you animate stroke-dashoffset from 0 to -169 and your animation is all setted
answered Mar 12 at 4:47
DuannxDuannx
3,6681536
You may want to add explanations for the SMIL one too, since from the images in the question, it seems it is the one they wanted.
– Kaiido
Mar 12 at 5:02
@Kaiido I've added some comment in the snippet to explain SMIL. Is there any point need to be more clear?
– Duannx
Mar 12 at 5:35
1
I do understand it no worries, I was thinking more in the last paragraph, but this comment in the code might be enough.
– Kaiido
Mar 12 at 5:40
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55071496%2fanimating-svg-gradient-border%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Here you go!
path
stroke-dasharray: 30 139;
stroke-dashoffset: 0;
animation: spin 1s linear infinite;
stroke-width: 3;
@keyframes spin
0%
stroke-dashoffset: 0;
100%
stroke-dashoffset: -169;
<!-- Simple stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>
<!-- Simple gradient stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Simple gradient. Notice to x1, x2, y1, y2.
These values decide the direction of gradient. Gradient go from (x1,y1) to (x2,y2) -->
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient1)" stroke-width="2" fill="none"/>
</svg>
<!-- Gradient stroke that animate along with the animation. -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="1">
<!-- Change the value of x1,x2,y1,y2 during animation to change the direction of gradient.
Expected result: (x1,y1): (0,0) -> (1,0) -> (1,1) -> (0,1) -> (0,0)
(x2,y2): (1,1) -> (0,1) -> (0,0) -> (0,1) -> (1,1) -->
<animate attributeType="XML" attributeName="x1"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y1"
values="0; 0; 1; 1; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="x2"
values="1; 0; 0; 1; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y2"
values="1; 1; 0; 0; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient2)" stroke-width="2" fill="none"/>
</svg>Explanation: The key of that animation is playing with stroke-dasharray and stroke-dashoffset. stroke-dasharray: 30 139;. 30 is the length of the path that shows and moves to make animation. You can change it to whatever you want. 169 is total length of your path so 139 is the result of 169 - 30.
Then you animate stroke-dashoffset from 0 to -169 and your animation is all setted
answered Mar 12 at 4:47
DuannxDuannx
3,6681536
You may want to add explanations for the SMIL one too, since from the images in the question, it seems it is the one they wanted.
– Kaiido
Mar 12 at 5:02
@Kaiido I've added some comment in the snippet to explain SMIL. Is there any point need to be more clear?
– Duannx
Mar 12 at 5:35
1
I do understand it no worries, I was thinking more in the last paragraph, but this comment in the code might be enough.
– Kaiido
Mar 12 at 5:40
add a comment |
1
Here you go!
path
stroke-dasharray: 30 139;
stroke-dashoffset: 0;
animation: spin 1s linear infinite;
stroke-width: 3;
@keyframes spin
0%
stroke-dashoffset: 0;
100%
stroke-dashoffset: -169;
<!-- Simple stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>
<!-- Simple gradient stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Simple gradient. Notice to x1, x2, y1, y2.
These values decide the direction of gradient. Gradient go from (x1,y1) to (x2,y2) -->
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient1)" stroke-width="2" fill="none"/>
</svg>
<!-- Gradient stroke that animate along with the animation. -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="1">
<!-- Change the value of x1,x2,y1,y2 during animation to change the direction of gradient.
Expected result: (x1,y1): (0,0) -> (1,0) -> (1,1) -> (0,1) -> (0,0)
(x2,y2): (1,1) -> (0,1) -> (0,0) -> (0,1) -> (1,1) -->
<animate attributeType="XML" attributeName="x1"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y1"
values="0; 0; 1; 1; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="x2"
values="1; 0; 0; 1; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y2"
values="1; 1; 0; 0; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient2)" stroke-width="2" fill="none"/>
</svg>Explanation: The key of that animation is playing with stroke-dasharray and stroke-dashoffset. stroke-dasharray: 30 139;. 30 is the length of the path that shows and moves to make animation. You can change it to whatever you want. 169 is total length of your path so 139 is the result of 169 - 30.
Then you animate stroke-dashoffset from 0 to -169 and your animation is all setted
answered Mar 12 at 4:47
DuannxDuannx
3,6681536
You may want to add explanations for the SMIL one too, since from the images in the question, it seems it is the one they wanted.
– Kaiido
Mar 12 at 5:02
@Kaiido I've added some comment in the snippet to explain SMIL. Is there any point need to be more clear?
– Duannx
Mar 12 at 5:35
1
I do understand it no worries, I was thinking more in the last paragraph, but this comment in the code might be enough.
– Kaiido
Mar 12 at 5:40
add a comment |
1
1
1
Here you go!
path
stroke-dasharray: 30 139;
stroke-dashoffset: 0;
animation: spin 1s linear infinite;
stroke-width: 3;
@keyframes spin
0%
stroke-dashoffset: 0;
100%
stroke-dashoffset: -169;
<!-- Simple stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>
<!-- Simple gradient stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Simple gradient. Notice to x1, x2, y1, y2.
These values decide the direction of gradient. Gradient go from (x1,y1) to (x2,y2) -->
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient1)" stroke-width="2" fill="none"/>
</svg>
<!-- Gradient stroke that animate along with the animation. -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="1">
<!-- Change the value of x1,x2,y1,y2 during animation to change the direction of gradient.
Expected result: (x1,y1): (0,0) -> (1,0) -> (1,1) -> (0,1) -> (0,0)
(x2,y2): (1,1) -> (0,1) -> (0,0) -> (0,1) -> (1,1) -->
<animate attributeType="XML" attributeName="x1"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y1"
values="0; 0; 1; 1; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="x2"
values="1; 0; 0; 1; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y2"
values="1; 1; 0; 0; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient2)" stroke-width="2" fill="none"/>
</svg>Explanation: The key of that animation is playing with stroke-dasharray and stroke-dashoffset. stroke-dasharray: 30 139;. 30 is the length of the path that shows and moves to make animation. You can change it to whatever you want. 169 is total length of your path so 139 is the result of 169 - 30.
Then you animate stroke-dashoffset from 0 to -169 and your animation is all setted
answered Mar 12 at 4:47
DuannxDuannx
3,6681536
Here you go!
path
stroke-dasharray: 30 139;
stroke-dashoffset: 0;
animation: spin 1s linear infinite;
stroke-width: 3;
@keyframes spin
0%
stroke-dashoffset: 0;
100%
stroke-dashoffset: -169;
<!-- Simple stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>
<!-- Simple gradient stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Simple gradient. Notice to x1, x2, y1, y2.
These values decide the direction of gradient. Gradient go from (x1,y1) to (x2,y2) -->
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient1)" stroke-width="2" fill="none"/>
</svg>
<!-- Gradient stroke that animate along with the animation. -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="1">
<!-- Change the value of x1,x2,y1,y2 during animation to change the direction of gradient.
Expected result: (x1,y1): (0,0) -> (1,0) -> (1,1) -> (0,1) -> (0,0)
(x2,y2): (1,1) -> (0,1) -> (0,0) -> (0,1) -> (1,1) -->
<animate attributeType="XML" attributeName="x1"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y1"
values="0; 0; 1; 1; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="x2"
values="1; 0; 0; 1; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y2"
values="1; 1; 0; 0; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient2)" stroke-width="2" fill="none"/>
</svg>Explanation: The key of that animation is playing with stroke-dasharray and stroke-dashoffset. stroke-dasharray: 30 139;. 30 is the length of the path that shows and moves to make animation. You can change it to whatever you want. 169 is total length of your path so 139 is the result of 169 - 30.
Then you animate stroke-dashoffset from 0 to -169 and your animation is all setted
path
stroke-dasharray: 30 139;
stroke-dashoffset: 0;
animation: spin 1s linear infinite;
stroke-width: 3;
@keyframes spin
0%
stroke-dashoffset: 0;
100%
stroke-dashoffset: -169;
<!-- Simple stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>
<!-- Simple gradient stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Simple gradient. Notice to x1, x2, y1, y2.
These values decide the direction of gradient. Gradient go from (x1,y1) to (x2,y2) -->
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient1)" stroke-width="2" fill="none"/>
</svg>
<!-- Gradient stroke that animate along with the animation. -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="1">
<!-- Change the value of x1,x2,y1,y2 during animation to change the direction of gradient.
Expected result: (x1,y1): (0,0) -> (1,0) -> (1,1) -> (0,1) -> (0,0)
(x2,y2): (1,1) -> (0,1) -> (0,0) -> (0,1) -> (1,1) -->
<animate attributeType="XML" attributeName="x1"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y1"
values="0; 0; 1; 1; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="x2"
values="1; 0; 0; 1; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y2"
values="1; 1; 0; 0; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient2)" stroke-width="2" fill="none"/>
</svg>path
stroke-dasharray: 30 139;
stroke-dashoffset: 0;
animation: spin 1s linear infinite;
stroke-width: 3;
@keyframes spin
0%
stroke-dashoffset: 0;
100%
stroke-dashoffset: -169;
<!-- Simple stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>
<!-- Simple gradient stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Simple gradient. Notice to x1, x2, y1, y2.
These values decide the direction of gradient. Gradient go from (x1,y1) to (x2,y2) -->
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient1)" stroke-width="2" fill="none"/>
</svg>
<!-- Gradient stroke that animate along with the animation. -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="1">
<!-- Change the value of x1,x2,y1,y2 during animation to change the direction of gradient.
Expected result: (x1,y1): (0,0) -> (1,0) -> (1,1) -> (0,1) -> (0,0)
(x2,y2): (1,1) -> (0,1) -> (0,0) -> (0,1) -> (1,1) -->
<animate attributeType="XML" attributeName="x1"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y1"
values="0; 0; 1; 1; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="x2"
values="1; 0; 0; 1; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y2"
values="1; 1; 0; 0; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient2)" stroke-width="2" fill="none"/>
</svg>answered Mar 12 at 4:47
DuannxDuannx
3,6681536
edited Mar 12 at 5:30
answered Mar 12 at 4:47
DuannxDuannx
3,6681536
answered Mar 12 at 4:47
DuannxDuannx
3,6681536
answered Mar 12 at 4:47
DuannxDuannx
3,6681536
3,6681536
You may want to add explanations for the SMIL one too, since from the images in the question, it seems it is the one they wanted.
– Kaiido
Mar 12 at 5:02
@Kaiido I've added some comment in the snippet to explain SMIL. Is there any point need to be more clear?
– Duannx
Mar 12 at 5:35
1
I do understand it no worries, I was thinking more in the last paragraph, but this comment in the code might be enough.
– Kaiido
Mar 12 at 5:40
add a comment |
You may want to add explanations for the SMIL one too, since from the images in the question, it seems it is the one they wanted.
– Kaiido
Mar 12 at 5:02
@Kaiido I've added some comment in the snippet to explain SMIL. Is there any point need to be more clear?
– Duannx
Mar 12 at 5:35
1
I do understand it no worries, I was thinking more in the last paragraph, but this comment in the code might be enough.
– Kaiido
Mar 12 at 5:40
You may want to add explanations for the SMIL one too, since from the images in the question, it seems it is the one they wanted.
– Kaiido
Mar 12 at 5:02
You may want to add explanations for the SMIL one too, since from the images in the question, it seems it is the one they wanted.
– Kaiido
Mar 12 at 5:02
@Kaiido I've added some comment in the snippet to explain SMIL. Is there any point need to be more clear?
– Duannx
Mar 12 at 5:35
@Kaiido I've added some comment in the snippet to explain SMIL. Is there any point need to be more clear?
– Duannx
Mar 12 at 5:35
1
1
I do understand it no worries, I was thinking more in the last paragraph, but this comment in the code might be enough.
– Kaiido
Mar 12 at 5:40
I do understand it no worries, I was thinking more in the last paragraph, but this comment in the code might be enough.
– Kaiido
Mar 12 at 5:40
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55071496%2fanimating-svg-gradient-border%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
