Isometric Floating Layers (SVG)

#codepen #webdev #css #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.