Animate all shapes in SVG to rotate around a central pivot point

I am looking for a simple way to make an SVG graphic rotate around its center point. The rotation doesn't need to be smooth, just a 90 degree turn and back every second.

https://i.sstatic.net/H6CTF.png

Here is the SVG code:

<?xml version="1.0" encoding="utf-8"?>
<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 27 27" style="enable-background:new 0 0 27 27;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<rect x="0" width="27" height="27"/>
<!-- more SVG shapes here -->
</svg>

Could someone help me find an animation that allows these graphics to rotate around their central axis?

cssanimationsvgrotation

Answer №1

If you're looking to achieve animation, consider utilizing the animateTransform element:

.st0 {
  fill: white;
}
<svg>
  <g>
    <animateTransform
      attributeName="transform"
      type="rotate"
      values="0 14 14; 90 14 14; 0 14 14"
      dur="1s"
      repeatCount="indefinite" />
    <rect x="0" width="27" height="27"/>
    <rect x="8" y="11" class="st0" width="1" height="5"/>
    <rect x="9" y="10" class="st0" width="1" height="1"/>
    <rect x="10" y="9" class="st0" width="1" height="1"/>
    <rect x="11" y="8" class="st0" width="5" height="1"/>
    <rect x="13" y="6" class="st0" width="1" height="1"/>
    <rect x="14" y="7" class="st0" width="1" height="1"/>
    <rect x="14" y="9" class="st0" width="1" height="1"/>
    <rect x="13" y="10" class="st0" width="1" height="1"/>
    <rect x="18" y="11" class="st0" width="1" height="5"/>
    <rect x="17" y="16" class="st0" width="1" height="1"/>
    <rect x="16" y="17" class="st0" width="1" height="1"/>
    <rect x="11" y="18" class="st0" width="5" height="1"/>
    <rect x="12" y="17" class="st0" width="1" height="1"/>
    <rect x="13" y="16" class="st0" width="1" height="1"/>
    <rect x="12" y="19" class="st0" width="1" height="1"/>
    <rect x="13" y="20" class="st0" width="1" height="1"/>
  </g>
</svg>

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

Switching button class when hovering over another div

When you click on the "collapsible-header" div, I want the text "TE LAAT" in the button to change to "NU BETALEN". Currently, the CSS code changes the text on hover, but I want it to change on click when the collapsible-header also has the active class. T ...

javascriptjqueryhtmlcssonclick

The bottom margin of the last element does not affect the size of its container

I'm curious as to why the margin-bottom of .content-b isn't affecting the height of the .container. .container { background: grey; } .content-a, .content-b { height: 100px; border: 1px solid red; margin-bottom: 100px; } <div class= ...

htmlcss

Is there a way to ensure uniform font display across all browsers?

Is there a way to ensure consistent font display across all browsers? I am facing an issue with font consistency on my webpage. While browsers like Internet Explorer Edge and 11, Chrome, and Firefox display the desired font correctly, Internet Explorer 8 ...

htmlcssinternet-explorerfonts

Combining color and typography classes using Tailwind merge is currently not supported

In my custom styling setup, I have created a custom color class called text-green (colors) and a custom typography class called text-card-highlight (utilities), which includes font size and weight attributes. However, when using tailwind-merge, only one of ...

cssnext.jstailwind-css

Can CSS achieve Turing completeness?

As far as my understanding goes, CSS is not considered Turing complete. However, I admit that my knowledge of CSS is quite limited. Can CSS be classified as Turing complete? ...

cssturing-complete

The col-md-4 class in Bootstrap does not consistently maintain a width of 33%

Currently, I am utilizing bootstrap cards in my project. The number of cards within a card-deck varies dynamically. However, I have encountered an issue where each card should occupy a width of col-md-4 (33%). Everything works fine when there are more than ...

htmlcssbootstrap-4

Ways to retrieve and contrast the border style of an image utilizing javascript

I'm currently attempting to identify images on my webpage that have the style border: 1px #c6c6c6 solid; let images = document.getElementsByTagName('img'); for (let i = 0; i < images.length; i++) { if (images[i].style.border === "1px ...

javascriptcss

SVG to create a gradient mask that appears transparent

I require assistance with working on svg's. I have a "background image" with another "image" layered over it. The "image" needs to have a hole cut out of it so that the background image can shine through. I managed to achieve this by utilizing svg: ...

javascripthtmlcsssvg

What strategies can be utilized to enhance the cleanliness of these functions?

Is there a way to avoid adding new lines of JS code every time I add a new image to the HTML? $(document).ready(function() { $('.btn').click(function() { var bid = $(this).attr('id'); if(bid=="img1" || bid == "img2" || bid == "img3"){ ...

javascripthtmljquerycss

Retrieve all colors from the style attribute

I'm on the hunt for a method to extract all CSS colors from a website. Currently, I have been able to manage internal and external stylesheets by utilizing document.styleSheets. However, my issue lies in the fact that any styles directly assigned to a ...

javascriptjqueryhtmlcss

Placing a logo to the left of a UL list

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> & ...

jqueryhtmlcss

Printing without page borders

Is there a way to prevent the border on my pages from being printed? I've tried various solutions without success. Here is the code I am currently using: CSS: #pagy2 { background: #f3fff3; border:1px solid #c9dbab; width: 100%; margi ...

cssprintingborder

What is the best way to align a checkbox and text in the same row within a Mailchimp embedded form?

I am troubleshooting a styling issue with my Mailchimp form that has groups. The problem I'm encountering is that the checkboxes are displaying on one line while the text appears on the next line in an unordered list format. To see the issue for yours ...

htmlcssemail

Reorganize elements using CSS styling

I have a trio of child divs with the classes span2, span7, and span3. When my browser width drops below 763px, I want them to display in the order span2, span3, and span7. How can I achieve this using CSS? Here is the code snippet I started with: <div ...

htmlcss

Ways to ensure a div remains at the bottom of a page without using a wrapper

I am currently working on my website and this is the content I have in my body tag: #social-media { width: 175px; margin-left: auto; margin-right: auto; padding-top: 10%; } #social-media img { padding: 5px; } #soci ...

htmlcss

Dynamic content container with customizable sidebar

I have a query that remains unanswered in my research on various CSS layout options. Hence, I decided to share it here. My ongoing project involves a fluid/fixed two-column design. The main content is placed on the left side while the sidebar resides on t ...

htmlcsslayoutpositioningfluid

Text within the div element causes the displacement of other adjacent div elements

When the text in mondaySpecial extends to a second line, it pushes tuesdaySpecial-saturdaySpecial further down on the page, disrupting the layout of the divs. The same issue occurs with other specials as well. Is there a way to prevent this from happening? ...

htmlcss

Arrangement of multiple boxes in a single row using HTML code

Struggling to solve this supposedly simple problem, I'm reaching out for help. I need assistance in arranging multiple inputs with corresponding labels, all stacked horizontally on a single line as shown in the image. ...

csshtml

How do I modify the sidebar width with CSS code?

I am trying to adjust the width of the right sidebar on my website. The current layout leaves too much empty space on the right side and makes it appear crowded next to the main content and images in the center. Despite exploring various solutions provide ...

csswordpresswoocommercesidebar

The width of the child box does not properly receive the 100% application

Artistic Inspiration I have created a unique and elegant card layout design. * { box-sizing: border-box; } .card { display: flex; width: 600px; height: 400px; } .card > .img-window { width: 100%; background-image: url('https://s3- ...

htmlcssflexbox