SVG Cogs Animation

SVG files—one loaded as an image, one coded through WP—animated using CSS transforms and keyframe animation.

The cog and the sprocket each have their own named group within Illustrator which causes the SVG output to export them as <g> elements with an id set to the group name. CSS grabs the elements by the group name and transforms them as seen here. The {transform-origin: y% x%;} is the most delicate part of the process and had to be determined using the browser inspector. There is still some wobble visible in the gears since the center coordinates are so hard to pin down. There must be a better way of doing this part. One the CSS code was established, it could be pulled from the separate CSS sheet and dropped into the <style> element in the SVG itself. There are two sets of gears here. the top one was loaded as an image with embedded styles in the SVG, the bottom uses an HTML block to manually form the shapes and a separate style sheet (the main sheet for the child theme) to create the animation. Note that the top set cannot be manipulated in the inspector while the lower one can. I assume the same is true for JavaScript and media queries.

The gears above are loaded as an image into a WordPress block, with CSS transforms and animation embedded in the SVG file, while the gears below are coded into an HTML block on the page with a CSS file addressing them. They have basically the same look, but for the sake of demonstration, I’ve set the gears below at twice the speed and reversed their direction.

The CSS

The stylesheet for the lower animation looks like this:

cog {
     transform-origin: 20.3% 32.2%; 
     transform: rotate(0deg);
     animation: cog 1.5s infinite;
     animation-timing-function: linear;
 }
@keyframes cog {
     0% {transform: rotate(0deg);}
     100% {transform: rotate(-360deg);}
 }
sprocket {
     transform-origin: 64.1% 49.9%;
     transform: rotate(0deg);
     animation: sprocket 3s infinite;
     animation-timing-function: linear;
 }
@keyframes sprocket {
     0% {transform: rotate(0deg);}
     100% {transform: rotate(360deg);}
 }