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.

By in Playground on
Demo Code

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.

OrganicShapeMorphIdeas

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

We hope you enjoy the demos and find them inspiring!

References and Credits

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Inline Menu Layout with Gallery Panel

Drawing 2D Metaballs with WebGL2

On-Scroll Expanding Image Animation within Typography

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 13

Comments are closed.

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

    • 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

  5. 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!

    • Change in demo3.js file d:path.getAttribute(‘pathdata:id’) to d:path.getAttribute(‘pathLength’) and in html change pathdata:id to pathLength and all will work fine, html will be valid too.

  6. 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?

    • 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.

  8. 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?