Metamorphosis: morphing SVGs

Blacksmith photo by Jonathan Bean

Background

This is a show and tell article about SVG shape morphing. I want to share some of my experiences from using the technique. In the article I’ll show some of my demos and I’ll say a few words about each demo. They all, in different ways, involve shape morphing.

So, what is morphing? The word itself stems from old Greek. According to Wikipedia it originates somewhere around 500 years ago. Metamorphosis refers to the act of an animal or object changing its shape or form. The change takes place through one or several well defined transitions. Wikipedia: A change in the form and often habits of an animal during normal development after the embryonic stage. Besides talking about animals it’s used in more abstract contexts. For instance when talking about a person’s character or appearance. Looking at the etymology the word “metamórphōsis” (μεταμόρφωσις) stems from two words. They are “metá” (μετά, “after”) and “morphḗ” (μορφή, “form”).

Morphing on computers

The morphing effect appeared in the early 90s, where it came to have a widespread use. Different video material benefited from it. Movies, commercials & music videos are examples where morphing started showing up. The most notable example is the Michael Jackson music video for the song Black and White. It alone made face morphing popular. The story behind is well told in this article: An oral history morphing in Michael Jackson’s Black or White

Fast forward to the last five years. We’ve now seen morphing making its way into web. The rise of the flat UI trend, good SVG compliance and faster devices all acted as enablers. Today, 2017, it’s possible to use it performant across browsers. I’m not going into details about how the technique works. This article from 2014 in CSS-tricks covers the details: How SVG shape morphing works. Furthermore, this CSS-tricks article is well worth a read. It lists the different morphing tools out there: The many tools for shape morphing.

More possibilities

I like SVG morphing. Very much. Enough to write an article about it at least. It adds another dimension to the animation toolbox. You can do a lot with the three most common CSS transition transformations. I’m talking about translate, rotate and scale. Yet, none of these methods alter the shape of the animated object. The ability to change the shape and form opens up great possibilities. It becomes especially interesting when combined with other animation methods. Like e.g. the three mentioned above. You could for instance morph and change the color of the object. Use morphing together with translation. Or why not do all three together with different timings. Better yet, create something new. Mix it up with something trendy such as color blends or gradients. Only your imagination sets the limits.

Tooling

I use anime-js for morphing. It is not the best option when it comes to morphing per se. Other options more targeted towards morphing do exist. Some of these options do more of the heavy lifting for you. I prefer anime-js even though I need to do some more manual work. It has a very compact syntax and it allows me to combine morphing with other types of animations. Having more than one kind of animation is almost always the case nowadays. Features vs using many libraries is of course also a trade-off when it comes to selecting your tools. I generally like to keep the number of dependencies down.

Let’s have a look at the different demos:

Submenu expand

One quite useful use case for SVG morphing is, what I refer to as, inflating/deflating objects. By inflate/deflate I mean a more sophisticated method of scaling up/down objects. Let’s say you have a complex shape that you want to downsize. How do you downscale it? Scaling the object might not look good as some detailed parts can get blurry when drawn in fewer pixels. SVG Morphing is an option to circumvent this particular problem. It allows objects in their smaller size to take on a much more simpler shape. That could be a circle, a square or some other primitive shape. The pen below uses this technique. The menu icon (three dots) converts, when activated, into a second level mobile toolbar. Each dot translates to a new position and inflates into a second level menu icon. This inflate/deflate concept is particularly suited for mobile. As demonstrated below, morphing helps to overcome restrictions in space.

Triangles deer or rabbit

If one can morph one triangle then one could morph three triangles. If one can morph three triangles then one could morph 95 triangles. This is the theme of the next pen.

The art-form geometric/polygonal drawing inspired me to create this demo. It’s minimalistic. Straight lines, in a uniform and strict way, make up forms and shapes. There are very few nuances. Still, it’s easy to see portrayed object in the artworks. After searching, for inspiration, I found some animals drawn with triangles that I liked a lot. These artworks consisted of black triangles in similar sizes drawn on white background. I, almost in an instant, decided to create a transition between two of the artworks. After finding a couple of good candidates I settled for two. I choose a deer and a rabbit out of two reasons. They were a) beautiful and b) they had almost the same number of triangles.

One of the most important aspect of creating this demo is the logistics surrounding it. Sometimes it’s not what you create but how you create it that matters the most. I wanted to be able to iterate. Change, save, inspect the result, change, etc. Over and over again. To do so I set up a local web app environment with Yeoman. I fiddle around a bit with Gulp. I wrote a script converting SVG files to Javascript arrays. I set up the animations with anime-js. All these things combined, gave me the desired local working environment. I now could save the SVG file in the vector editor (Inkscape) and get an immediate result in the browser. It worked according to the following scheme:

1. Gulp is listening for changes to image files (**/*.svg).
2. Whenever Gulp detects a change (saving the SVG file) it calls a NodeJS script.
3. This script parses the SVG file and creates two arrays with Bezier curve data. One with the values for the deer and one with the values for the rabbit.
4. BrowserSync detects a change in the file system and reloads the browser
5. Reloading the browser restarts the animations using the recreated arrays.

The above allowed me to build the demo in increments using only a vector editor. I could develop the demo triangle by triangle in the fastest way possible. Considering and enhancing your local development environment is something I can recommend. It is of course not always applicable, but in some cases it gives great speed boosts.

Landmarks morph

The landmarks morph shows the most common use-case for SVG morphing. I.e. morphing between two or more well-defined shapes. In this case famous landmarks**.** An important aspect of SVG shape morphing is to keep track of the order of the points/nodes. Morphing, more or less, is almost always applied to the SVG element <path>. To be more specific, it’s applied to its descriptor (the d attribute). This descriptor consists of many points. They, together, make up the different geometric parts of the path. Examples of parts of the path element, to mention a few, are lines, curves and arcs. It very much mimics real-life drawing on paper, where one draws a shape from one point to another. To get the desired morphing effect I drew all the landmarks in the exact same way. I started with the leftmost bottom corner. Then I created the nodes counterclockwise. All shapes have the exact same amount of nodes (136 nodes). The order here is important. The first node of the first shape will move to the first node’s position of the second shape. If the order is off then the effect won’t be smooth.

Pull to refresh

In this demo I’m taking a stab at one of the most common of all micro-interactions. Pull to refresh or PTR. For more about micro-interactions refer to this article: Boost your design by-micro-interactions. Micro-interactions are in essence a sequence of events coupled with a single user task. Triggering it produces, in the common case, a chain of animations and visual feedback to the user. These animations are well suited for SVG morphing. Most often they occur in a seamless sequence. In this example there’s for instance an arrow is morphing into a circle. Using something other than morphing wouldn’t be as smooth. It would most likely distract the user in a sensitive moment. It’s of importance to use an intuitive effect here. If not, the micro-interaction might not be as effective. Compare for instance with lets say using a cross-fade. That would be more disruptive and it could mislead the users’ attention. Morphing creates a more subtle and natural connection between the graphical elements. It is important to remember that the animation is not only meant to delight your users. It should also provide better UX, leading and telling your users about what’s going on behind the scenes.

Modern retro — IBM THINK

I’ve always been a fan of minimalism in art. Especially works from the 60s involving minimalism and typography always caught my eye. The modern retro trend has been on for a while. It is, in some ways, a natural continuation of the flat UI trend. This article by Isabella Carvalho gives good insights to retro art and color blends. It made me want to explore blending colors in web a lot more. It inspired me to find the CSS rule mix-blend-mode that’s used in this pen. The mix-blend-mode is, to me, an underused CSS property. Used in the right contexts it can create quite interesting effects. I find it especially interesting when it’s combined with animations. The IBM THINK poster used in the demo is also in the article. Furthermore, the article highlights some of Karl Gerstner’s work. It is amazing how most of his work still feels modern today.

This pen uses an alternative method to morph the SVG elements. The effect is an animation created by using the SVG line animation technique. The different elements in this pen are actually thick strokes and not SVG path elements. In technical terms, it is not SVG shape morphing, but it gives a similar feeling.

That’s it! If you’re interested in more about anime-js. Be sure to check out my two other articles on animating with the library. How to create a check-mark animation and How to create a favorite animation.

Since starting writing this article I’ve created some other SVG morphing demos:

• Morphing loader spinner
• Geometrical Birds — slideshow
• Inline expandable card
• Mozilla blend morph
• Morphing loader spinner — part II
• Codepen create