10 Magnificent Code Examples of Morphing SVGs

The ability to morph one shape into another fascinates me. I can still remember the first time I saw it in action. It was Michael Jackson’s “Black or White” video – way back in 1991. There, a diverse collection of people were constantly morphing into one another. It was all pretty amazing, especially considering the amount of processing power (or lack thereof) that was available at the time.

As it relates to web design, morphing gained some steam back in Flash’s heyday. The software’s tweening feature made simple morph effects fairly easy. And now, the tradition continues in the form of MorphSVGPlugin.

The plugin, which works with the GSAP library, allows for morphing between shapes with relatively little code. It can automatically calculate the transition points between shapes and produce an incredibly smooth animation.

To see MorphSVGPlugin in action, I searched the archives of CodePen for the best of the best. But first, a fair warning: The effect is a bit mesmerizing. Sit back and enjoy the show (and don’t operate heavy machinery for at least 10 minutes afterwards)!

Simple Shapes

If you really want an illustration that shows you how MorphSVGPlugin works, this is it. You get to see the various shapes being used and then the final result.

See the Pen Frames & Layers with morphSVG by Shaw (@shshaw) on CodePen.

A Happy Troll

One look at this cute little emoji will…yikes…what is that thing? The element of surprise is evident here and I love that the background changes along with the character.

See the Pen Awesome Troll by Jon Kantner (@jkantner) on CodePen.

Like Moth to Flame

Morphing is not only useful for surprise effects. It can also help to recreate natural effects, like this candle’s flame.

See the Pen Flame by Sarah Drasner (@sdras) on CodePen.

Swinging Light

This fun example of a draggable light shows some subtle morphing technique. Notice how the perspective of the object changes as it moves up and down.

See the Pen SVG Pendant Lamp ( GSAP ) by Diaco M.Lotfollahi (@MAW) on CodePen.

May the Morph Be With You

Star Wars just seems like a perfect subject (and excuse) to play around with MorphSVGPlugin. Here, we see popular visuals and characters morph in this very slick production.

See the Pen SVG Wars: May the morph be with you. by Craig Roblewsky (@PointC) on CodePen.

A Practical Use

While it’s great fun to see the more experimental uses of morphing, this example demonstrates its practicality. Clicking on the button produces a useful microinteraction that just happens to include a morphing icon.

See the Pen MorphSVG in Button on Click by Geoff Graham (@geoffgraham) on CodePen.

Environmental Impact

Here we have an attractive card layout that uses morphing icons to show the impact that paper receipts have on our environment. The animation helps to drive the point home.

See the Pen Environment Impact Cards (GSAP) by Anton Mudrenok (@mudrenok) on CodePen.

Hipster History

Enough practicality – this one is just plain fun. Sarah Drasner’s “Interchangeable Hipster” features morphing eyewear and facial hair. Far out!

See the Pen Interchangable Hipster by Sarah Drasner (@sdras) on CodePen.

Into the Wild

At first glance, this animation doesn’t appear to have a lot going on. But a closer look reveals tons of subtle, natural-looking movements. This is a good reminder that morphing doesn’t always have to be big and flashy.

See the Pen Underneath by GRAY GHOST (@grayghostvisuals) on CodePen.

Being Responsive

Lastly, here’s a morphing animation we designers can relate to. Watch as the iMac turns into a laptop, then a tablet, then…well, you get the picture.

See the Pen SVG Device Animation by David Bachmann Johannesson (@dbj) on CodePen.

Mighty Morphing

The examples above show that morphing effects can be useful in a number of ways. Sure, they can be silly and fun. But they can also serve as a means to subtly attract a user’s attention. Regardless of how you use them, they’re a great way to show off your creativity.

Interested in seeing more? Check out MorphSVGPlugin’s CodePen collection for more examples.

The post 10 Magnificent Code Examples of Morphing SVGs appeared first on Speckyboy Web Design Magazine.