Как сделать адаптивный SVG фон на блок? или никак?

Question

[Даниил]

Приветствую, задача сделать "фигуристый фон", но при масштабировании страницы он обрезается по краям...

Вот так получается

должен быть примерно так, но во всю ширину

реально ли сделать так, как на втором скрине, но адаптивно?

Вариант покрасить блок через css и сверху и снизу вставить svg файл, который создает эффект такой волны не прокатит, так как там все сделано градиентом и будет нереально сопоставить градиент блока и градиент svg файла...

Comments

[Rustam Bainazarov]

Можете на абсолютном позиционировании поставить фон в отдельном блоке внутри родителя, тогда он будет искажаться. Имею в виду через img, inline SVG или object.

А-ля:


Есть метод с background-size: 100% 100%;, но для этого нужно подготовить сам SVG. Проще вышеупомянутым способом сделать.

Answer 1

[RAX7]

Если на SVG сделать маску внутрь которой засунуть еще SVG, то может чего и получится

Comments

[Даниил]

Подскажите, пожалуйста, где лучше рисовать, чтобы свг был максимально адаптированным под сайты?

[RAX7]

Даниил, рисовать можно в любом векторном редакторе (Adobe Illustrator, Inkscape), потом собирать руками в любом текстовом редакторе.