Как сделать волны на css3?

Question

[Александр Андреев]

В дизайне сайт присутствует такой элемент joxi.ru/Q2Kn6N1h4W9BJm нужно сделать эти волны на css чтобы не заморачиваться с нарезкой фоновой картинки так чтобы при повторении по оси X небыло видно шва. Вообще возможно ли сделать такой элемент на css, может css + js, не могу найти ничего похожего.

Comments

[Ярослав Иванов]

Пэ Эн Гэ

[Александр Андреев]

Ярослав Иванов: т.е. 4 блока разной прозрачности с повторяющимся куском png? Какой-нибудь js плагинчика нет? )

[Ярослав Иванов]

Александр Андреев: Плагина для чего ?

[Ankhena]

Не поможет css.yoksel.ru/new-patterns ?

Answer 1

[Ivan Bogachev]

Плюсую за svg, а сам параллакс вполне хорошо делается с помощью css анимации - пример.

Comments

[Александр Андреев]

Иван а как вы эту волну получили, на сколько понял координаты в теге прописаны в атрибуте d='' . Я попытался векторный слой joxi.ru/EA4NOP4fwnjzdm через иллюстратор перегнать в svg и оттуда взять значение атрибута d="" в теге но в получившемся svg много тегов . В общем не получается сделать волну нужной формы =(

Answer 2

[Николай]

svg, можно и на css сделать, но будет не легко)
https://codepen.io/davidelvar/pen/kkJxYW