DEV Community

Cover image for Isometric Floating Layers (SVG)
Yoav Kadosh
Yoav Kadosh

Posted on

3 1

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.

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay