In this tutorial, we'll look at how to implement the morphing SVG overlays as seen in this codrops tutorial.

A tutorial on how to implement a tutorial? Yep. Codrops has done all the hard work for us here and gets all the credit for the code. Their tutorial explains how morphing SVG Shapes to create overlay effects is achieved & goes through where to change the values in the javascript to customise the effect etc.

Live Demo

What may not be obvious from their tutorial is how to actually implement this in an Oxygen template.

Codrops provides downloadable demos which includes the code for 6 demos. Let's walk through how to implement them in Oxygen; (if you want to import the template from our demo into your site, you can grab the site key at the bottom of the tutorial)

Implementing in Oxygen

From the demos in the provided source code, we just need to take the code for the SVG shapes, the animated burger toggle & the animated links. Everything else can be removed, which I've already prepared.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: