Animate the rotation of specific paths within the SVG

I've designed an SVG using Illustrator and I have a specific animation in mind for it.

My goal is to create an animation where the upper part of the circle line rotates from left to right (considering that there are 4 circle lines, with number one starting from the bottom inside the circle) and the next circle line rotates from right to left. Below is the SVG code:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="700px" height="700px" viewBox="0 0 3000 3000" enable-background="new 0 0 3000 3000" xml:space="preserve">
    <g>
        <g>
            <!-- Add your paths here -->
        </g>
        <g>
            <!-- Add more paths here -->
        </g>
        <g id="XMLID_1_">
            <g>
                <!-- More paths to animate -->
            </g>
            <g>
            </g>
        </g>
        <g>
            <!-- Paths used for animation -->
        </g>
    </svg>

How can I implement this animation in my SVG file, with circle line 4 moving from left to right and circle line 3 moving from right to left?

csssvgcss-animations

Answer №1

Identify the specific element or group g that needs to be animated and ensure it has an ID (If you name your layers in Illustrator, they should be exported as IDs)

Define a keyframe animation (without prefixes for brevity)

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Apply this to the desired element (Only one in this example)

#XMLID_1_ {
  animation: spin 12s linear infinite;
  animation-direction: reverse; /* see note below */
  transform-origin: center;
}

Note: The animation is set to run clockwise, but can be reversed using the animation-direction property.

#Layer_1 {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  display: block;
}
#XMLID_1_ {
  animation: spin 12s linear infinite;
  animation-direction: reverse;
  transform-origin: center;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 3000 3000" enable-background="new 0 0 3000 3000" xml:space="preserve">
  <g>
    ...

Note: Transformations of this type may be interpreted differently in different browsers, with variations between Chrome and Firefox. Various SO questions discuss this issue.

For additional resources:

Codepen Demo

CSS-Tricks offers numerous articles on this topic, including one specifically on Transforms

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

Seeking guidance on resolving issues with this div table

After almost getting everything set up, I encountered some strange issues that have been difficult to resolve. The challenges I'm facing include: The spacing on the right side is too large. Tables always appear stacked without any spacing in bet ...

htmlcsscss-tables

Encountering Issues with Formatting InnerHtml Text using RegEx

Technology: React.js I have been working on a custom function in JavaScript to highlight specific words within a code block. The function seems to be functioning correctly, but the highlighting isn't staying after the function is completed. Any ideas ...

javascriptjqueryhtmlcssregex

Simple steps to generate a static header in list view on asp.net

I'm struggling to keep my header fixed while scrolling and can't seem to figure it out. Below is my ListView Code: <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="FormSectionSubSectionItemRelID" OnSele ...

cssasp.netlistview

Adjust the width of a textarea dynamically as you type by detecting keyup events

Two text areas have the same text formatting. Their IDs are textareaA and textareaB. I've successfully added functionality to resize textareaA on keyup. How can I make textareaB resize its WIDTH while the user is typing in textareaA? Here's wha ...

javascriptjqueryhtmlcss

Modify anchor link color in a one-page website by using Jquery to detect scroll position changes when reaching different page sections

Each if statement contains specific numbers to change the text color of the visited/current/active anchor link. The height of the page is dependent on its width. How can this be resolved? Apologies if my explanation is confusing, English isn't my stro ...

jqueryhtmlcss

Navigating a collection of objects after a button is clicked

My current library project involves looping through an array of objects to display them on a grid based on input values. Here is the code snippet for my loop: const addBook = (ev) => { ev.preventDefault(); let myLibrary = []; let bookIn ...

javascripthtmlcss

Ways to customize decoration in Material UI TextField

Struggling to adjust the default 14px padding-left applied by startAdornment in order to make the adornment occupy half of the TextField. Having trouble styling the startAdornment overall. Attempts to style the div itself have been partially successful, b ...

javascriptcssreactjsmaterial-ui

Steps for setting a background image for a div

I am facing an issue with 3 horizontally aligned images and a background image. The problem is that when I set the background image for the aligned images, it flows over them instead of staying behind. I want the 3 aligned images to be on top of the backgr ...

htmlcss

Personalize the appearance of dynamically generated DIV elements

This script generates a random number of squares (ranging from 20 to 40) and adds text to each square. The script then calculates the width of each square so that they all fit in a single row. Here is the code snippet: var quantity = Math.floor(Math.ran ...

javascriptcss

I'm having trouble with my bootstrap dropdown and I've exhausted all of my options trying to fix it based on my current understanding

My dropdown menu is not working despite adding all necessary Bootstrap CDN and files along with the jQuery script. Even with the table being handled by JavaScript, the button does not respond when clicked repeatedly. I suspect the issue lies within the han ...

javascripthtmljquerycssbootstrap-4

Unusual body padding found in the mobile design

When visiting on a mobile device and inspecting the elements in Google Chrome, try disabling the style rule overflow-x: hidden from the body element and then resizing the window. You may notice a white vertical stripe (padding) appearing on the right side ...

javascripthtmlcss

Exploration of jQuery Dropdown Menus

Encountering a problem with my dropdown menu. Check out the code here: http://jsfiddle.net/xY2p6/1/ It seems like a simple issue that I can't figure out, but as shown in the link, the functionality is not working properly. I need help linking the hid ...

jqueryhtmlcssdrop-down-menu

Maintain the proportional scale of images set to a percentage with window resizing

Currently working on developing a web application. The images in the app are sized using percentages, with three overlapping another image that functions as a toolbar. Everything looks great when viewed in fullscreen mode, but the problem arises when the s ...

htmlcssjquery-mobilewebapp2

Switching the typeface within the content data

Recently, I incorporated this code: <div data-content="Reach" class="main-image"> along with the following CSS styling: .main-image:before { content: attr(data-content); I am now wondering if there is a method to adjust the font size and ...

css

Reposition various div elements within a static container

Struggling to align div boxes like the image below was exhausting: I attempted fixing it with the code provided in this JSBIN link. How can I resolve the issue and adjust the layout as desired? Any help would be greatly appreciated. Thank you in advance ...

csshtmllayout

Utilizing CSS3 Animation for enhanced hover effects

I have a setup with two divs. One of the divs expands in height when I hover over it. What I'm trying to achieve is to display text with a fade-in effect somewhere on the screen when I hover over that specific div. Additionally, I want to show another ...

htmlcsshover

Emphasize the most recent file during the document upload process and ensure the scroll bar moves accordingly to the document

I am currently working on a feature where the scroll bar should move to the newly uploaded document in a list of documents. When I upload a new document, I want the scroll bar to automatically move to that document. Currently, the highlighting changes to t ...

javascriptangularjshtmlcss

Tips for causing text to wrap to a new line when reaching the end of a div element

I am struggling with keeping a text inside a div from overflowing when it reaches the border of the div. I have tried various CSS properties like "word-break" and overflow, but haven't been able to find a solution. <div class="col-lg ...

htmlcsstextbootstrap-4

A combination of Webpack CSS modules with Angular templates

I am currently trying to integrate webpack CSS modules into my angular/ionic project. I'm wondering if it's possible for the CSS module class definitions to be correctly appended to an external template instead of an inline template. When I embe ...

cssangularjswebpack

Is there a way to modify the color of my question post-submission?

Within my code, there are numerous queries that need to be addressed. Upon submission, I desire to alter the color of each question to green if the response is correct, or red if it is incorrect. document.getElementById("submit-button").addEventLi ...

javascripthtmlcsscolors