I am currently working on an svg animation that involves changing the color of the svg to a different color, creating a running light effect. Rather than fading the fill color of the entire svg as commonly seen in examples, I aim to achieve a dynamic transition from one color to another.
Here is a snapshot showing a few frames of the animation: svg animation
Despite exploring various techniques, I have yet to discover an optimal solution.
I attempted implementing it using CSS keyframes:
$.keyframe.define([{
name: 'shift',
...
...
}]);
$('.ledbar').playKeyframe({
name: 'shift',
duration: "4s",
timingFunction: 'linear',
delay: 0,
direction: 'reverse',
fillMode: 'forwards',
});
The orange part should move over the green areas of the svg. Each rectangle in the svg was designed to be incrementally 6px further than the previous one. However, due to the smooth transition between keyframes, the animation flickers. Transitioning the animation step by step might resolve this issue, but I'm unsure how to execute this effectively.
Hence, my query revolves around achieving a linear color shift within the svg to another color. I've explored options like svg masks without success.
If you find it helpful, here is the svg file:
<?xml version="1.0" encoding="utf-8"?>
...
...
</svg>