Isometric Floating Layers (SVG)

ykadosh

Yoav Kadosh

Posted on April 5, 2021

Isometric Floating Layers (SVG)

I made this SVG animated illustration for a piece I was writing about Webrix.js (you can find it here: https://webrix.amdocs.com/motivation).

I've made a <Layer/> component that is completely configurable (size, color, position, text), and you can stack as many as you need together and create your own illustration.

I'm using 3 <path/> elements internally to draw each layers and make it appear 3-dimensional: one for the shadow, one for the highlight, and one for the body.

💖 💪 🙅 🚩
ykadosh
Yoav Kadosh

Posted on April 5, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Isometric Floating Layers (SVG)
codepen Isometric Floating Layers (SVG)

April 5, 2021