Organic SVG Shape Morph Ideas

A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content reveal effect.
OrganicShapeMorphIdeas

Today we’d like to share some more animated organic SVG shapes with you. The idea is to integrate some flowy, natural looking shapes into a web page as decorative elements, sometimes with an interaction, i.e. a background of menu that changes on hovering the menu items, or simply, a constantly animating wave background that got inspired by Kévin Lagier’s design. In one of the demos we also use some patterns and clip paths that get animated to fullscreen in order to reveal some other content. The morphing path and other animations in these demos are powered by anime.js.

This demo is kindly sponsored by: Jetpack Professional, the only WordPress plugin you really need.

Attention: Note that the demos are highly experimental and are best viewed on a modern desktop browser.

Have a quick look at all the demos:

OrganicShapeMorphIdeas01

OrganicShapeMorphIdeas02

OrganicShapeMorphIdeas03

OrganicShapeMorphIdeas04

OrganicShapeMorphIdeas05

We hope you enjoy the demos and find them inspiring!

References and Credits

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 12

  1. 4

    Nevermind, just tried it in Chrome and it worked – for some reason the nav menu in the bottom does not display in Safari.

    • 5

      In Safari v11 (12604.1.38.1.7) (Latest update), in Web Inspector: main » div class=”content content–fixed”, in “Styles” menu, uncheck “height: 100vh” and the bottom nav menu will reappear

  2. 7

    For demo 3, I was wondering why do you need to use the pathData:id attribute? I tried switching it to path.getAttribute(‘d’) and it doesn’t seem to work, even though it has the same values as pathData:id.

    Thanks!

  3. 8

    I noticed you wrap whole javascript files in curly braces. Is there a reason for this is it like module.exports ? Do you know of an article/tutorial that explains why you would do this?

    • 9

      Hi Andrew,
      we just like to scope all the js code into one block statement. This shouldn’t be necessary, I guess, for such simple examples and it’s definitely not necessary if you use modules since these have their own scope.

  4. 11

    Any idea why demo 3 is super laggy in Safari and Safari only? Is there something that is specifically causing the animation frame rate to more slow?

Follow this discussion

Leave a Comment