I've added a filter to my self-created SVG and I'm interested in animating it so that the colors move diagonally, giving the appearance of a spinning planet.
Below is the code featuring my SVG and how I'd like it to begin with the blue color positioned towards the upper-right. The second SVG showcases the animation effect I'm aiming for, ideally looping to create a rotating illusion.
Is it feasible to achieve this using an SVG? Alternatively, is there a simpler method to accomplish this without relying on an SVG?
I should mention that I'm using React to develop this page, if that information is pertinent.
<div class="planet-container">
<p style="color: #fff; padding: 2em;">Starting Point</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 Result</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>For reference, here's the JSFiddle link: https://jsfiddle.net/illusive_yeti/nxg4st8q/5/