Как лучше верстать подобный узор?
Я бы отрезал от волны бесшовный кусочек и сохранил в PNG без фона. Далее сделал бы блок во всю ширину и сделал заливку фона этой PNG-шкой. Можно сделать тоже самое с помощью SVG. Если нужна совместимость, можно сделать fallback с помощью Modernizr.
На бело-коричневой границе паттерн из гифа, у которого верхняя часть непрозрачная с белым паттерном (верхняя прямоугольная граница на таких шумах незаметна), а нижняя часть прозрачная, но цвет matte не дефолтный белый, а цвета коричневого фона. Будет немного шумновато, но визуально незаметно.
На нижней картинке придётся использовать полупрозрачный png.