No prior knowledge on svg. Somehow Built this animated svg using React components 😼

React -> SVG?

svg is awesome

draw it in illustrater, sketch, inkscape, name all layers.
Export it.
Open it with your text editor
Add the

<cDATA>
<style></style>
<script></script>
</cDATA>

tag below the title.
And your good to go to use anything you like to manipulate the labled layers dom. If it's css animation, a js libary or the web animations api ->
https://goo.gl/FNBSvO

Everything in one independent SVG file.

I love it!

@ScriptCoded I have each svg element (a group) wrapped in React component. So it can be reused to create multiple rooms with different layout, and render the animation based on props

@heyheni I’m using inksape. Kind weird ui, but free 😂

@sunfishcc Aaah! Cuul!

i wish there was an equivalent of svg that uses json syntax instead of xml 😆

that would be much easier to edit.

@heyheni nah, it wouldn't be easier.. xml is still markup, so it makes perfect sense to use that.

@xewl @heyheni I’m using a svg clean up tool to trim all unnecessary bits from raw file. The code ends up every lean. So I guess build arbitrary svg components from json is possible.

@sunfishcc yeah svg omg is pretty nice.

https://goo.gl/cLI2Hr
SVGOMG - SVGO's Missing GUI