Animating SVG gradient border

Question

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>

Duannx · Answer 1 · 2019-03-12T05:30:03.880

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

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 '19 at 05: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 '19 at 05:35
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 '19 at 05:40

Animating SVG gradient border

1 Answers1