Gradient Topography Animation

An organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.

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 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:




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

References and Credits

Tagged with:

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.

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 9

Comments are closed.
  1. 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. Awesome work! T am so glad that my artwork inspired you to create this! Thank you so much for sharing!

  3. Very beautiful work … that I’ve used on my little web site … respect and love !

  4. Very nice work and I want to implement these in my sites, but I am not able to do this. As I need to make few modifications like adding text inside a bubble and then I also need to change positions of the bubble.

    I have checked that svg is used for this:
    Each layer of a bubble is a tag and “d” attribute I think is the position of static bubble and when clicked on its respective text then bubble’s effect’s values are taken from pathdata:id.

    As I need to make modifications, so I have no choice other than creating a different svg for that, and in that I am getting values for d attribute, but not for pathdata:id. I am not able to calculate values for pathdata:id attribute. So my effect is getting distorted.

    Please let me know how can I make modifications in this.