Animating an SVG with CSS
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.
Have a play with the html on the repo below for the first link above:
The second url above with multiple examples is here: