How to made dynamic SVG illustration on the document site top?

[ryota-murakami]

I'm impressed the representing what does MSW doing within smart visualized this one.
Could you tell me what kind of tool used to create it?
I'm not familiar designer's field or creating graphic/visual staffs. 😅

==================================================================

[kettanaito]

Hey, @ryota-murakami. Nice to hear from you.

For most of the animated graphics on the website, I've used Sketch. The app itself doesn't do any animation, but it allowed me to draw illustrations, export them in SVG, and then animate certain elements via plain CSS. Our website is open-sourced, so you can see how that very illustration is brought to life here.

For that particular illustration there's a dotted line with an animated dash offset, which creates an effect of movement. Then the REST and GraphQL parts on the top/bottom are, actually, always present, just hidden via CSS and transitioned from respective sides with a timed delay so they don't overlap.

I'm sure there's a more efficient way to achieve such a visual presentation, but due to my lack of design skills, I went with a more programmatic approach. Let me know if you have any more questions.

[ryota-murakami]

@kettanaito Thank you for your decent response!
I see how made it that graphics and will be useful that CSS mixed approach for me 🤗