Is it possible to add animation to an SVG filter to create a captivating rotating planet with color effects?

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/

javascripthtmlcssreactjssvg

Answer №1

To achieve animated effects with the feOffset filter, you can utilize SMIL elements.

<div class="planet-container">
  <p style="color: #fff; padding: 2em;">Start of Animation</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The malfunctioning buttons are a result of embedding PHP code within a JavaScript if-query

I am experiencing an issue where my buttons are not functioning properly, preventing me from clicking on them. All variables have been correctly assigned values. Can someone assist me in resolving this? Thank you. ?> <script> ...

javascriptphphtmlmysql

Text field is losing focus after each character entered from the keyboard

Why does the focus shift away when I enter a character in the field? How can I fix this issue? "use strict" import React from "react"; import createReactClass from "create-react-class"; import RaisedButton from 'material-ui/RaisedButton'; impo ...

reactjsmaterial-ui

Update class name in React component based on state change

My current setup involves the setting of active and class flags as shown below: constructor(props) { super(props); this.state = {'active': false, 'class': 'album'}; } handleClick(id) { if(this.state.active){ this.s ...

javascriptreactjs

PHP Ajax file uploads can be tricky, as they often result in the frustrating "undefined

Encountering issues with submitting file through ajax. Despite following instructions from various sources, the formdata does not seem to contain the file resulting in an 'undefined index 'image'' error. <form enctype: 'multip ...

javascriptphpajaxforms

How should HTML5 type "month" be stored in a Django model's database using which data type?

My HTML form includes a field for inputting a month <input type='month' name="last_appraisal" id='txtLastAppraisal' value='2013-12' /> In the Django model, I have defined this field as last_appraisal = models.DateFie ...

pythondjangohtml

Steps to update an object in a react hooks project using axios and a json server

I have implemented a dialog box within a table to enable editing of rows using an axios.patch request. However, I am facing an issue where the values of the row are displayed in TextFields inside the dialog box but cannot be updated. Can anyone provide ass ...

reactjsaxiosreact-hooksmaterial-uijson-server

Learn the process of implementing an SVG icon in your Angular Material project

I'm currently attempting to incorporate a single icon into my Angular Material application. Following the documentation, I have implemented $mdIconProvider in the following manner: app.config(function($stateProvider, $urlRouterProvider, $mdIconProvid ...

javascriptangularjssvgangular-material

What is the best way to loop through a collection of key-value pairs?

I am experiencing an issue while attempting to iterate through a sample data collection in my code. The error message Failed to Compile is being displayed, and the problematic area seems to be render() { within this particular component: class RecipeLis ...

reactjs

An uncaught SyntaxError occurred due to an omission of a closing parenthesis after the argument list in code that is otherwise

I have a Javascript code that sends an Ajax request and upon receiving the data, it creates an "a" tag with an onclick event that triggers another method along with a parameter. Below is the implementation: function loadHistory() { var detailsForGe ...

javascriptasp.netajax

Calculating the median in JavaScript utilizing a for loop

Currently, I am in the process of learning JavaScript. My goal is to calculate the median of a set of numbers that I input through a prompt when I click the button labeled "find median". function CalculateMedia() { var n = prompt("Enter the number of e ...

javascripthtml

Flexbox causing issues with relative positioning at the bottom of the screen in various browsers

My flex component looks like this: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" ... width="100%" height="100%" creationComplete="init()"> ....... <components:Naviga ...

javascripthtmlapache-flexflash

HTML/CSS Top Bar: Position two contents at opposite ends of the top bar

I am attempting to design a top bar with the following layout Tel:4949494949 social media icons In the center, I want to display contact information and on the right side, my social media icons. However, ...

htmlcssnavbar

React: Maximum call stack size exceeded error was caught as an uncaught RangeError

I've been experimenting with React and I've managed to get the functionality I want, but it's running very slow due to an infinite loop lurking somewhere. I suspect the issue lies within the component lifecycle methods, but I'm unsure h ...

javascriptreactjs

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Currently, I am utilizing a script to fetch data from a Google Sheet $.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) { var sheetData = data.feed.entry; va ...

javascriptjqueryhtml

When Bootstrap 4 teams up with Autoprefixer, it results in malfunctioning old iPads

.row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } Recently, we implemented Bootstrap 4 and the Flex model at my company. We'v ...

cssflexboxbootstrap-4autoprefixer

Championing React, TypeScript, and TSLint: A Pose of Cur

In my React and TypeScript project, I am utilizing react router dom to dynamically load components from the backend. However, when I import components like "ListData", they are considered unused and removed when I save. How can I keep these components fr ...

reactjstypescripttslint

Tips for utilizing bootstrap.css to position a web design form in the center of the page and place the copyright at the bottom

I have spent several hours trying to figure out how to achieve this, but still haven't found the solution. I have a form that I believe doesn't look very good: So, I attempted to center the form on the page and place the footer.php at the botto ...

jqueryhtmlcsstwitter-bootstrap

Unit testing is encountering issues due to errors with objects not being accepted as a React child component

Here is the code where I am testing the functionality of mytestFunc when a checkbox is checked. Checkbox - <input id="mycheck" type="checkbox" onClick={this.mytestFunc} /> mytestFunc function - mytestFunc = e => { const mockdata = this.stat ...

javascriptreactjsunit-testingjestjsenzyme

Ways to stop a tag from causing disruption to the alignment of another

In a div with text-align: center; applied, I have two tags. My issue is that I want one of them to be centered on the same line, while the other is positioned to the right. However, both tags are currently sharing the centered space and extending equally t ...

htmlcssbutton

Rearranging information within a JSON structure

Here is a sample of Javascript object and code to consider: Javascript Object { "thing":{ "data":"some data", "thumb":"some data", "data1":"some data", "data2":"some data", "data3":"some data", }, "extra1":[ ...

javascriptjson