Gradient Topography Animation

An organic SVG shape layer animation based on Diana Hlevnjak's work "Gradient Topography". Powered by anime.js.
GradientTopographyAnimation_Featured

Today we’d like to share a shape layer animation with you. The inspiration for this effect comes from the fantastic work by Diana Hlevnjak (Polar Vector) “Gradient Topography”. We use anime.js for the animations and Charming for the letter effects.

After seeing the artwork, we thought it would be awesome to animate these kind of gradient layers of an organic shape in an interesting way. For this we’ve created a little layout that has several shapes spread on the page and when a menu item is clicked, the associated shape group will expand to full screen and some content is shown.

The demo is kindly sponsored by monday.com: The perfect project management tool for designers. If you would like to sponsor one of our demos, find out more here.

Attention: We’re using CSS variables, grid and flexbox for the demos, so please view this with a modern browser.

The organic shapes consist of path layers where each one has the same gradient but a decreasing fill opacity. This creates an interesting look and when animated, fills the entire screen with the semi transparent layers until it’s fully opaque after the last layer enlarges. The other shapes scale down.

Have a look at some screenshots:

GradientTopographyAnimation_01

GradientTopographyAnimation_02

GradientTopographyAnimation_03

We hope you enjoy this little effect and find it useful!

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 7

  1. 2

    Excellent as always!!! One little UX thing that has caught me out a lot with your demos is the previous demo arrow icon. I don’t know about everybody else but I always subconsciously hit that expecting to go back to the article. I know the drop icon does that but it just seems to me that the arrow icon would be the more logical choice. I know this is just a little thing but I will admit that I’ve found it irksome when it’s caught me out. Anyway, love what you guys do, keep up the amazing work of making the web a better place!

  2. 3

    Awesome work! T am so glad that my artwork inspired you to create this! Thank you so much for sharing!

Follow this discussion

Leave a Comment