Как создаются SVG?

Question

[ogkonstantin]

Уважаемые дизайнеры и фронтовики !

Подскажите, как создаются такие шедевры ?
tympanus.net/Development/OffCanvasMenuEffects

Хочется сделать меню как на этом сайте
demodern.com

Не могу понять технологию создания svg|canvas элементов.
Надо сначала рисовать это дело в Illustrator?

Есть ли какие - нибудь туториалы ?
Спасибо всем, кто откликнется !

Answer 1

[Лера К]

svg - для сложных форм и элементов, если формы и заливки простые - достаточно прописать все свойства блокам в цсс.
вот тула на эту тему - cssanimate.com
вот похожая анимация - codepen.io/suez/pen/emjwvP

если, все же, интересует работа с анимированием svg элементов, посмотрите в сторону Adobe Animate CC (потомок Flash, который теперь умеет работать со всеми форматами - с canvas, svg и многими др.), в этом случае - основной элемент удобнее отрисовать в люстре, да.