How are SVGs created?

Question

Adobe Illustrator

Dear designers and veterans!
Tell me how such masterpieces are created?
tympanus.net/Development/OffCanvasMenuEffects
I want to make a menu like on this site
demodern.com
I can't understand the technology of creating svg|canvas elements.
Do I need to draw this case in Illustrator first?
Are there any tutorials ?
Thanks to everyone who will respond!

Answer 1

svg - for complex forms and elements, if the forms and fills are simple - it is enough to register all the properties for the blocks in css.
here is a tool on this topic - cssanimate.com
here is a similar animation - codepen.io/suez/pen/emjwvP
if, nevertheless, you are interested in working with animating svg elements, look towards Adobe Animate CC formats - with canvas, svg and many others), in this case - the main element is more convenient to draw in a chandelier, yes.