When you want to create interesting animations, SVG’s will be something you’ll have to work with. Rather than using other’s creations, I prefer to make my own using Figma. Scalable Vector Graphics in simplified terms allow you to retain the pixel quality independent of dynamic sizing. Whether you scale or not the quality of the image is retained.
I make my SVG on Figma and it’s really not complicated. See below
The one on the right is the image and the left part shows the finished result.
After you head over to Figma, you can begin by selecting the frame size, however, it also works fine without doing that.
Next, you want to use the pen tool to draw out all individual parts separately.
Example:- I stored the eyes, hair, cover as different component parts.
You can use the tools on the right-hand corner for styling and coloring
Before I export, I want to make sure to click on “id attribute” that allows it to add “id” to the SVG.
To finish off, change the export type to SVG and click export.
Once you get to your code editor, you will want to add the svg to your .html in order to interact with it fully.
