Organic SVG Shape Morph Ideas

Original Source: http://feedproxy.google.com/~r/tympanus/~3/DQy-PQj6iOY/

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:

We hope you enjoy the demos and find them inspiring!

References and Credits

anime.js by Julian Garnier
Keyboard icon by Paul te Kortschot from the Noun Project
Patterns from Hero Patterns

Organic SVG Shape Morph Ideas was written by Mary Lou and published on Codrops.