Как сделать такой эффект фона на css/js?

Question

[werrrrrrr]

Всем здравствуйте.
Я вообще бэкендер, в фронтенде познания минимальные, но очень хочу сделать такой же эффект, как на фото.
Даже мысли нет насчет того, как его реализовать. Нужна помощь

Comments

[VoidVolker]

А какой именно эффект-то вам нужен? Тут как бы статическая картинка - вырезаете/рисуете нужную картинку и вставляете её фоном на вашей веб-странице.

[werrrrrrr]

VoidVolker, я имею в виду линии фиолетовые на фоне

[VoidVolker]

werrrrrrr, нуу, открываете фотошоп или любой другой графический редактор и рисуете их.

[werrrrrrr]

VoidVolker, ааа, это так делается, тогда лаадно

[VoidVolker]

werrrrrrr, ну да - так обычно все картинки и рисуются. Если же вы хотите программно рисовать такое или анимацию какую - то тут несколько сложнее будет.

[werrrrrrr]

VoidVolker, вообще да, хотелось бы программно. С изображениями всякие проблемы могут возникать, а вот если прописать в css, то это, так скажем, будет универсальнее. Но я абсолютно не знаю, как такое можно отрисовать в css

[werrrrrrr]

VoidVolker, да я и настолько не дизайнер, что в граф редакторе не смогу даже такие линии отрисовать..

[modelair]

werrrrrrr, это скорее всего svg(но в равной степени и png может быть, который и сделан из svg), поищите всякие, может, svg css background.
вот навскидку https://www.svgbackgrounds.com/set/free-svg-backgr...
готовых всяких svg-рисунков в инете пруд-пруди, вставить крайне просто. нарисовать не сможете, зато любую svg налегке отредактировать в соотвествующем редакторе. сам svg это xml

[Ankhena]

werrrrrrr, ну не надо самому рисовать, есть плагины для Фигмы, которые такое делают

Типа этого: https://www.figma.com/community/plugin/95072570969...

Только на фон берите png (не забудьте 2х, 3х), svg будет очень тяжелым, если много кривых.

[VoidVolker]

werrrrrrr, а зачем вам программно-то его генерировать? Вам нужна рандомизация? Анимация? Или что? Какую проблему вам надо решить? Просто сделать похожий фон?

[SolidSnack]

Шейдеры посмотрите)

[Александр Лисин]

Обычно такие вещи делаются фон + SVG. Если нужна какая-то примитивная анимация, то можно попробовать vivus.js, для более сложных анимаций gsap и/или after effects, всё зависит от потребностей.