Creating Scalable Vector Graphics(SVG) animation process step by step by help of sea bear. Here author Monica Powell to describe how to make entire process through CSS and JavaScript.
How to make SVG transfer Animation By CSS and Javascript?
Step-1: Find visual inspiration
I usually find a reference photo to use as inspiration for the SVG I’d like to create unless it’s a more abstract concept.
I also tend to start off my digital illustrations with one or multiple reference photos. I am currently working on developing different skills as an artist and use the photo as a visual guide for colours, anatomy and/or proportions.
Some of my go-to places for inspiration are Pinterest, Unsplash, Pexels, Google Image, etc. The cool thing about Unsplash and Pexels is that the photos on those sites are generally directly attributable to a specific creator and allow reuse freely.
Step-2: Create a sketch outline
Create a sketch outline I find it helpful to take time to come up with a rough sketch before creating the final SVG.
I generally create this rough sketch on my iPad in Procreate to have more control in creating the shapes. This step in particular really helps speeds up the process for me in Adobe Illustrator.
Step-3: reference or trace sketch in Illustrator or a vector -art based program:
To create SVG. I then will trace over my previous sketch using an Apple Pencil on iPad with the pen tool in Adobe Illustrator.
If the image is less complex or proportions aren’t as pertinent then I can more so eyeball the initial sketch to convert it to an SVG and use it as a looser guide. Once I have the lines in Illustrator I adjust individual points along each path to ensure that the overall shape and quality of the lines is on par with the desired result.
Step-4: Color the Vector:
Once I am happy with the shapes in Illustrator then I begin filling in the colours to get closer to the final image.
Step-5: sketch out the animation timeline:
This was something Cassie Evan’s recommended in her SVG animation workshop which I found helpful for better organizing more complex animations.
This involves drawing different versions of the image at different points in the timeline. I also note any visual changes I’d like to make during the animation that isn’t reflected in a particular sketch (in order to have loose pseudocode to guide me as I animate).
The above image is a rough sketch showing how the eyes and water should change over time with the animation along with a note indicating the background colour will shift as well
The pseudocode for my Sea Bear animation based on the above sketch looked like:
1) ripples animate in (opacity 0% -> 100%)
2) ripples grow (scale 1.2) and rotate as paws rotate!
3) bear eye sparkle moves around
4) throughout steps 1 -> 3 the background color is changing slightly between aqua blue and a deeper greenish blueI can use this information as a guide when implementing the code needed to animate the SVG.
Step-5: Clean up SVG for export
Clean up SVG for export. Once I have an animation plan it’s time to clean up the SVG so that it is easier to programmatically change the values that are key to the animation.
In Adobe Illustrator I make sure all of the layers are named as these layer names will be “id”s in the final exported SVG code and then I also group the layers in Illustrator in the groupings I’d like to animate them in. I then also used a tool like SVGOMG to do some clean up to optimize the organized SVG to simplify paths, ensure no images were embedded, etc.
These optimizations should reduce the file size of the SVG and make it easier to work with programmatically. CSS Tricks has a good overview of resources for optimizing SVGs.
Step-6:
Add the cleaned up SVG code to HTML tab in a new Pen on CodePen and started coding animation!
Now Full Implementation On Codepen–
This entire article written by Monica Powell.
