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