SVG Metamorphosis
I love the wonderful world of web animations, and most recently became interested in SVG morphing. For my first attempt at morphing SVGs, I illustrated a low-poly version of the Yellow Power Ranger built with 40 triangles and using the (soon to be depreciated*) SMIL method. I learned a lot, and got some positive feedback.
In light of my new-found interest in morphing, I’ve put together this tutorial using Sketch to create a custom SVG illustration from scratch and then morph it by tweaking the code using Snap.svg — an animation library that uses JavaScript and makes working with SVGs a little bit easier.
This is my first time using Snap.svg in a project. The reason why I’m using it is because I encountered some limitations using only the SMIL method to achieve more advanced animations.
Disclaimer: I would say this tutorial is for beginner-level front-end devs, but having a basic understanding of Sketch, HTML/CSS/JS, and experience with a good text editor is a good prerequisite.
Ready? Today we are learning…
How to make an Animated SVG Butterfly
STEP 1: Setup your Sketch file.
Create 3 art boards — 450px by 450px. Rename them accordingly — caterpillar, cocoon, butterfly.
STEP 2: Build the butterfly SVG file
For this tutorial, we’re going to use 5 polygon objects and manipulate them into three designs like the above. Let’s walk through building the butterfly design — since it’s the most complex out of the three.
- Place 3 polygons on the art board — then stretch the one of them down. It will be the body of the butterfly
- In EDIT MODE, double click on the vertices (points) to round them off.
- Enlarge and rotate the two other polygons to form the butterfly’s right wings
- Copy and paste (or duplicate) the right wings and mirror them vertically. Move the body layer on top of the rest.
- Resize and center the butterfly on the art board.
If you’re not familiar with manipulating shapes in Sketch you can see my process below:
You should now have a full, grey butterfly shape. Before we export the SVG, let’s add some colour!
IMPORTANT! Once your design is complete, select all and flatten all your polygons! This will remove the transformations (rotate, flip, etc) you’ve added to the original shape and make the SVG code cleaner.
STEP 3: Export the SVG and save it in an HTML file.
Select the “butterfly” art board in the left panel of the Sketch window. On the right bottom corner, an option should pop up to export. Choose SVG format and then click “Export butterfly”.
Once exported, open the SVG file in your text editor of choice (for me, that’s Sublime Text), clean it up a bit and save it as an html file (I named mine butterfly.html). Be sure to move the SVG into the body of the HTML file!
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<title>Butterfly SVG Morph</title>
</head>
<body> <svg width=”450px” height=”450px” viewBox=”0 0 450 450">
<g id=”Page-1" ... >
<g id=”butterfly” stroke=”#202020" ... > <!-— PATHS HERE -- > </g>
</g>
</svg></body>
</html>
Note how the polygons were exported as paths? I will refer to them as polygons in this tutorial but it’s important to recognize that in the exported SVG they are <path> objects.
See process below:
Cool — leave that HTML file for now — we’ll return to it shortly. We still have the butterfly.svg file for reference too. Let’s go design the Caterpillar and Cocoon — back into Sketch…
STEP 4: Build the caterpillar and cocoon SVGs.
Copy the same polygons used for the butterfly onto the other art boards, and follow similar steps to the above to create the new shapes.
Manipulate the polygons into a caterpillar/cocoon shape (double-clicking on the vertices and making circular globs here is a good choice), and change the colours accordingly.
It doesn’t have to be fine art — have fun with it.
Export the SVGs once complete. Open them in your text editor along with the original butterfly.svg file, but no need to clean them up or anything. We just need to chop them up for use in JS anyway.
STEP 5: Copy in caterpillar paths, update SVG IDs
We want to start the animation with the caterpillar phase, so copy all the <path> objects from caterpillar.svg and paste them into butterfly.html — replacing the original paths that were there.
Add unique IDs to each path — I used “poly-01” to “poly-05” to represent the 5 original polygons we used.
STEP 6: Include jQuery + Snap.js and write some JS!
Be sure to include jQuery and the Snap.js files first! For the purposes of this tutorial, I just included the JS in <script> tags at the bottom of the HTML file.
Call Snap.svg’s Snap() function on your 5 polygons and establish a variable for each morph phase.
// the 5 polygons
var poly1 = Snap(‘#poly-01’);
var poly2 = Snap(‘#poly-02’);
var poly3 = Snap(‘#poly-03’);
var poly4 = Snap(‘#poly-04’);
var poly5 = Snap(‘#poly-05’);// the 4 animation phases
var morph01 = true; //caterpillar
var morph02 = false; //cocoon
var morph03 = false; //butterfly
var morph04 = false; //cocoon-reverse
Then build a click function using the original ID that was exported with your SVG from Sketch. For me, that’s “butterfly”:
var butterfly = $('#butterfly');butterfly.on('click', function() { });
Inside the click function, write some IF statements to trigger the animation phases, like so:
if (morph01) {
//if caterpillar, morph into cocoon — copy in cocoon path
values & fill colours poly1.animate({d:"", fill:""}, 500, mina.easein);
poly2.animate({d:"", fill:""}, 500, mina.easein);
poly3.animate({d:"", fill:""}, 500, mina.easein);
poly4.animate({d:"", fill:""}, 500, mina.easein);
poly5.animate({d:"", fill:""}, 500, mina.easein);
morph01 = false; //no longer caterpillar
morph02 = true; //we are now a cocoon} else if (morph02) {
//if cocoon, morph into butterfly — copy in butterfly
path values & fill colours
poly1 . . . poly5.animate(); morph02 = false; //no longer cocoon
morph03 = true; // we are now a butterfly } else if (morph03) {
//if butterfly, morph back into cocoon — copy in cocoon
path values & fill colours
poly1 . . . poly5.animate();
morph03 = false; //no longer butterfly
morph04 = true; //we're a cocoon again } else if (morph04) {
//if cocoon for second time, morph back to caterpillar &
start cycle again — copy in caterpillar info
poly1 . . . poly5.animate();
morph04 = false; //no longer second cocoon
morph01 = true; //back to starting as a caterpillar
}
Using the code above, paste the path information from the appropriate phases (caterpillar/cocoon/butterfly) into the double-quotes for the “d” value for all 5 polygons. Do the same for the “fill” colour — copy and paste the hex value from the appropriate SVG phase.
.animate({d:"", fill:""}, 500, mina.easein);In the above line of code, the 500 represents the duration (500 milliseconds), and mina.easein is an easing function that’s built into Snap.svg. Read more about them in the docs.
Double check that your SVG path IDs match your JS — then start copying and pasting the appropriate info (in our case the path “d” values and the fill hex codes) from the 3 SVG files into the JS animate objects. Here’s the beginning of my process:
This is where copying and pasting the information from the SVG files into the JS can be tiresome — so if you have any tricks to make this more efficient using your text editor, that would be ideal.
Once you’re done copying & pasting, your file should look like this:
Open it in your browser, and you should now have a morphing SVG butterfly (or some other globular creature) of your very own! Want to see my final code? Check it out — I’ve posted it on codepen.
Next steps for this would include adding a button or some other UI element to trigger the click instead of clicking the SVG itself to get it to morph. We only used 5 polygons for this animation, but my low-poly Power Ranger SVGs have 40.
Using Snap.svg is a lot of fun and I look forward to designing more advanced SVG animations in the future. I also really enjoyed writing this tutorial — if you have any feedback or if you morphed something awesome after reading this I’d love to hear from you: nat@natcooper.com
*Read more about the state of SVG Animation in this blog post by the Queen of SVG Animations and all-around rad lady, Sara Soueidan.
