Is there a way to animate an SVG's filter in order to achieve a rotating planet effect with the colors?

Question

I have a filter on this SVG I created and I want to be able to animate it so that the colors move diagonally on a loop to make it look like a planet that's spinning.

In the code below I show my SVG and how I'd like it to start with the blue color toward the upper-right and then the second SVG is what I'm trying to achieve with an animation. I would love for the animation to loop to give it the rotating effect.

Is this possible to do with an SVG? Or is there an even simpler way to achieve this without using an SVG?

I'm also using React to build this page (if that matters).

 <div class="planet-container"> <p style="color: #fff; padding: 2em;">Beginning</p> <svg viewBox="0 0 210 210"> <filter id="inset-shadow-1" x="-50%" y="-50%" width="200%" height="200%"> <feComponentTransfer in="SourceAlpha"> <feFuncA type="table" tableValues="0 1" /> </feComponentTransfer> <feGaussianBlur stdDeviation="28"/> <feOffset dx="-25" dy="35" result="offsetblur"/> <feFlood flood-color="rgba(255, 207, 113, 0.8)" result="color"/> <feComposite in2="offsetblur" operator="in"/> <feComposite in2="SourceAlpha" operator="in" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode /> </feMerge> <feDropShadow dx="-2" dy="4" stdDeviation="5" flood-color="rgba(255, 207, 113, 0.2)"/> <feDropShadow dx="2" dy="-4" stdDeviation="5" flood-color="rgba(35, 118, 221, 0.2)"/> </filter> <circle cx='105' cy='115' r='76' fill='rgb(35, 118, 221)' filter="url(#inset-shadow-1)" /> </svg> </div> <div class="planet-container"> <p style="color: #fff; padding: 2em;">End</p> <svg viewBox="0 0 210 210"> <filter id="inset-shadow-2" x="-50%" y="-50%" width="200%" height="200%"> <feComponentTransfer in="SourceAlpha"> <feFuncA type="table" tableValues="0 1" /> </feComponentTransfer> <feGaussianBlur stdDeviation="28"/> <feOffset dx="25" dy="-35" result="offsetblur"/> <feFlood flood-color="rgba(255, 207, 113, 0.8)" result="color"/> <feComposite in2="offsetblur" operator="in"/> <feComposite in2="SourceAlpha" operator="in" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode /> </feMerge> <feDropShadow dx="-2" dy="4" stdDeviation="5" flood-color="rgba(255, 207, 113, 0.2)"/> <feDropShadow dx="2" dy="-4" stdDeviation="5" flood-color="rgba(35, 118, 221, 0.2)"/> </filter> <circle cx='105' cy='115' r='76' fill='rgb(35, 118, 221)' filter="url(#inset-shadow-2)" /> </svg> </div>

Here is also a JSFiddle: https://jsfiddle.net/illusive_yeti/nxg4st8q/5/

Answer 1

You can animate the feOffset filter's values using SMIL .

 <div class="planet-container"> <p style="color: #fff; padding: 2em;">Beginning</p> <svg viewBox="0 0 210 210"> <filter id="inset-shadow-1" x="-50%" y="-50%" width="200%" height="200%"> <feComponentTransfer in="SourceAlpha"> <feFuncA type="table" tableValues="0 1" /> </feComponentTransfer> <feGaussianBlur stdDeviation="28"/> <feOffset dx="-25" dy="35" result="offsetblur"> <animate attributeName="dx" from="-125" to="125" dur="5s" repeatCount="indefinite" /> <animate attributeName="dy" from="125" to="-125" dur="5s" repeatCount="indefinite" /> </feOffset> <feFlood flood-color="rgba(255, 207, 113, 0.8)" result="color"/> <feComposite in2="offsetblur" operator="in"/> <feComposite in2="SourceAlpha" operator="in" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode /> </feMerge> <feDropShadow dx="-2" dy="4" stdDeviation="5" flood-color="rgba(255, 207, 113, 0.2)"/> <feDropShadow dx="2" dy="-4" stdDeviation="5" flood-color="rgba(35, 118, 221, 0.2)"/> </filter> <circle cx='105' cy='115' r='76' fill='rgb(35, 118, 221)' filter="url(#inset-shadow-1)" /> </svg> </div>