how to make an svg colour change with time

Question

I have this SVG path line down below that has two circles moving with a specific duration of time from one end to another. Is is possible to change the colour of the blue circle so it would be blue in the start, after 20s, it would start going white, then it would go to orange(from white)when it has 20 more seconds to go to reach the end, while the red circle would change its own colour depending on the colour of the circle and then adding a glow behind the current blue moving circle that would be the color of the current blue circle?

Does this mean the whole has to be made with javascript or how do I have to amend the HTML so it would function such way as described?

   <svg width="450" height="450">
               <path id="motionPath2"
     d="M 50 200 L 400 200 "
     stroke="
     none" fill="transparent" />
              <circle class="circle" r=20 fill=#ff0000 z-index=55>
             <animateMotion dur="100s" repeatCount="indefinite"
     rotate="auto">
                 <mpath href="#motionPath2" />
             </animateMotion>
         </circle>
         <path id="motionPath"
     d="M 50 200 L 400 200 "
     stroke="
     black" fill="transparent" />
              <circle class="circle" r=5 fill=#45b6fe z-index=55>
             <animateMotion dur="100s" repeatCount="indefinite"
     rotate="auto">
                 <mpath href="#motionPath" />
             </animateMotion>
         </circle>
      </svg>

Temani Afif · Answer 1 · 2019-10-20T22:23:46.950

3

You can introduce CSS animation where you can easily handle the coloration.

Here is a basic example to illustrate the idea:

@keyframes color {
  from {
    fill: red;
  }
  to {
    fill: green;
  }
}

#big {
  animation: color 20s linear infinite;
}

<svg width="450" height="450">
               <path id="motionPath2"
     d="M 50 200 L 400 200 "
     stroke="
     none" fill="transparent" />
              <circle class="circle" id="big" r=20 fill=#ff0000 z-index=55>
             <animateMotion dur="20s" repeatCount="indefinite"
     rotate="auto">
                 <mpath href="#motionPath2" />
             </animateMotion>
         </circle>
         <path id="motionPath"
     d="M 50 200 L 400 200 "
     stroke="
     black" fill="transparent" />
              <circle class="circle" r=5 fill=#45b6fe z-index=55>
             <animateMotion dur="20s" repeatCount="indefinite"
     rotate="auto">
                 <mpath href="#motionPath" />
             </animateMotion>
         </circle>
      </svg>

and since it's about a simple geometry you can easily do this using only CSS without SVG

.box {
 margin:100px;
 height:2px;
 background:green;
 position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  width:80px;
  height:80px;
  border-radius:50%;
  left:0;
  top:0;
  transform:translate(-50%,-50%);
  background:red;
  animation:move 10s linear infinite alternate;
  animation-name:move,color,glow;
}
.box:after {
  width:20px;
  height:20px;
  background:blue;
}
@keyframes move {
  to {
    left:100%;
  }
}

@keyframes color {
  to {
    background:yellow;
  }
}
@keyframes glow {
  to {
    box-shadow:0 0 30px yellow;
  }
}

<div class="box">

</div>

edited Oct 20 '19 at 22:23

answered Oct 20 '19 at 19:26

Temani Afif

245,468
26
309
415

The info was helpful. I also updated the original snippet to display the full idea. Also, is it possible to add the glow to #big, as it already has one animation, according to this [link](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text) the glow also has to be an animation, but I do not believe there can be two separate animations in the same id box. Also, when tried with box-shadow, it creates a glowing box instead of a circle. – john_snow5214 Oct 20 '19 at 20:56
@john_snow5214 don't edit your question with what I made or my answer will be irrelevant :) and you can append as many animation as you want to one element : https://stackoverflow.com/q/26986129/8620333 – Temani Afif Oct 20 '19 at 21:04
I changed it back – john_snow5214 Oct 20 '19 at 21:07
Added this change:

and linked the glow code from that link into the spinner, but it did not work.
– john_snow5214 Oct 20 '19 at 21:17
@john_snow5214 check the update, added a CSS solution easier to handle where you will have color change and the glow effect, simply adjust it as you want – Temani Afif Oct 20 '19 at 22:24
Well wow. It functions better than I originally expected glow would work. Thank you very much. I will try to add it to a svg path. – john_snow5214 Oct 21 '19 at 22:27
Hello. I have been trying to add this `box-shadow` to that SVG path, but it seems it is not possible. Could you provide info on the functioning of this fiddle: https://jsfiddle.net/developingm/nsgbwfjL/59/ – john_snow5214 Oct 30 '19 at 21:09

score 2 · Accepted Answer · answered Oct 20 '19 at 19:23

This is a partial answer to your question because I understand it only in part. I hope after seeing the answer you'll be able to formulate a better question.

Changes I've made:

You are using an animation for every circle but since the path is the same and the animation are identical I've putted both circles in a group and I'm animating the circle.

Also since the path is a line I could have used animateTransform ... type="translate" instead. However you may want to change the path to something more complicated so I'm sticking with animateMotion.

In order to animate the color you can use <animate> to animate the fill, and use the values attribute for the colors: values="red;white;orange"

Since you mention that the last color should apear 20seconds before the animation ends I'm using keyTimes= "0; 0.8; 1". Please note that the keyTimes attribute has the same number of values as the values attribute and represents a list of time values used to control the pacing of the animation.

<svg width="450" height="450">
<path id="motionPath2" d="M 50 200 L 400 200 "
     stroke="black" fill="transparent" />
<g>  
  <circle class="circle" r="20" fill="#ff0000"></circle>
<circle class="circle" r=5 fill="#45b6fe" >
     <animate 
       attributeName="fill"
       attributeType="XML"
       values="#45b6fe;white;orange"
       keyTimes= "0; 0.8; 1"
       dur="100s"
       repeatCount="indefinite"/>
  </circle>
   <animateMotion dur="100s" repeatCount="indefinite">
       <mpath href="#motionPath2" />
   </animateMotion>
  </g>       
 </svg>

It is working. The original question I had in mind was more than when time is 0, the circle is blue, then it changes colour to white within 20 seconds, remains white for 60 seconds and then turns to orange within the last 20 seconds. — john_snow5214, Oct 20 '19 at 20:07
I added values="#45b6fe;white;white;orange" and keyTimes= "0; 0.2;0.8; 1" — john_snow5214, Oct 20 '19 at 20:12
Also, where I could find such svg ducumentation that explains the capabilities of svg? — john_snow5214, Oct 20 '19 at 20:13
@john_snow5214 [here](https://www.w3.org/TR/SVG11/animate.html) and [here](https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SMIL_animations) — Robert Longson, Oct 20 '19 at 20:38

how to make an svg colour change with time

2 Answers2