Как верстать подобные SVG-фоны?

Question

[Андрей]

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

Пример: https://www.figma.com/proto/LqjuU3qBS3T4mb6VaTEIq1...

Comments

[Ankhena]

Тут у каждой секции свой фон, даже если он немножко заходит на другую.
Можно делать это с помощью padding и отрицательных margin.
Либо сдвинутыми псевдоэлементами.

Answer 1

[Antony Bark]

Для фонов создавайте отдельный лаут. Далее играйте позиционированием, отталкиваясь от ID секций и позиции scroll
Как пример подобного вот накинута страничка

Answer 2

[Валентин Бируля]

Глупый вопрос а зачем там SVG? Обычный линейный градиент:)

background: -webkit-linear-gradient(192deg, #3b1d60,#040d3e);
background: linear-gradient(192deg, #3b1d60,#040d3e);

Дальше обычный блок с цветом #040D3E

П.С. Линейный градиент нужно покрутить поизменять, чтоб в макет идеально подошел