Как сделать чтобы картинка собиралась с разных элементов?

Question

[HelpMeeee]

Есть картинка
Хочу сделать так, чтобы она собиралась с шести частей и не знаю как это сделать. Это нужно каждый элемент подстраивать ? Может есть какая-то библиотека? Я в общем совсем не знаю, даже что спросить т.к. не понимаю как это вообще делать :(
Подскажите как это лучше реализовать?

Comments

[Andrey Vasilev]

может просто видео сделать, где она собирается и вставить на сайте?

[Артём Ведищев]

Важный вопрос не как, а зачем?

Попробуй слоеный фон...

[HelpMeeee]

Andrey Vasilev, Не-а

Answer 1

[Арсений Матыцин]

SVG импортируй прямо из редактора.
Почисти, приведи в чувство код и радуйся. Можно и проанимировать.

Comments

[HelpMeeee]

Подробнее, пожалуйста

[Арсений Матыцин]

HelpMeeee, в редакторе, если он векторный, объекты виделить → Ctrl + C, в текстовом редакторе → Ctrl + V. Картинка на лицо векторная, т.е. такая возможность существует. Для этого надо исходный файл иметь, скажем в ai. В противном случае ничего не получится. Но можно воссоздать, картинка-то простая.

[HelpMeeee]

Арсений Матыцин, Ну картинка в фигме, по элементам разобрал. Как их теперь позиционировать то?

[Арсений Матыцин]

HelpMeeee, а, фигма. Экспортируй группу в svg. И его же можно открыть в текстовом. Позиционирование в случае SVG включено в стоимость.

[HelpMeeee]

Арсений Матыцин, Ок, я вот не очень понимаю в свг. Мне вот эти path анимировать нужно?

[Арсений Матыцин]

HelpMeeee, не нужно, а можно. Если же суть вопроса «собиралась с шести частей» есть анимация, то да, эти элементы анимировать. CSS умеет работать со встроенным кодом, ну или JS. А так как тема вопроса достаточно обширная, то с данными советами я отправляю тебя в гугол, изучать, что можно и как нужно работать с SVG. Для них, кстати, как и для всего в вебе, уже есть готовые библиотеки.

[HelpMeeee]

Арсений Матыцин, Можешь подсказать библиотеки плиз?