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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more