Published on Mar 17, 2020

Implementing SVG Shape Overlays from Codrops in Oxygen

David Browne

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 $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right