SVG animation with CSS

Animating an SVG with CSS

https://lab.amcc.io/svg-rainbow-circle/

https://lab.amcc.io/svg-css-circles/

With only CSS and SVG you can make very creative animations with tiny filesizes and high performance. JavaScript frameworks are incredible, but sometimes they can really work the processors hard and turn your fans on. CSS animations are incredibly performant and SVGs are tiny in file size.

There's a fantastic tutorial here: https://youtu.be/UTHgr6NLeEw by Fireship which demonstrates using to create the SVG and then animate with CSS. This workflow is very easy and Figma is a very useful tool to create SVGs.

A great workflow is like so:

  • Make your graphics with Figma, group elements you want to control with CSS, the name of the layer will become an ID.
  • Export the frame from Figma, selecting "include ID attribue" and you probably want to uncheck "show in exports" under fill.
  • Copy the SVG code into your html so you can apply CSS to the sub-elements.
  • There's some smart stuff you can do by adding a CSS variable as a style to SVG elements, check the video above for more on that.
  • There's no javascript in the example above, but of course you can go wild with that if you want more.

Have a play with the html on the repo below for the first link above:
https://github.com/amcc/svg-rainbow-circle

The second url above with multiple examples is here:
https://github.com/amcc/svg-css-circles/