21

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

Comments
  • 3
    React -> SVG?
  • 6
    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!
  • 2
    @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
  • 2
    @heyheni I’m using inksape. Kind weird ui, but free 😂
  • 2
  • 0
    i wish there was an equivalent of svg that uses json syntax instead of xml 😆

    that would be much easier to edit.
  • 2
    @heyheni nah, it wouldn't be easier.. xml is still markup, so it makes perfect sense to use that.
  • 2
    @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.
  • 2
    @sunfishcc yeah svg omg is pretty nice.

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