Как верстать такие декоративные элементы?

картинкой

Круг - можно используя border и подберая border-radius, но может не получится идеальный круг, тогда немного нужно изменить общий размер.

.circle{
width: 100px;
height: 100px;
border: 4px solid blue;
border-radius: 50px;

}

Волну проще всего картинкой, но если есть какието указания не использовать картинки то SVG

Этот макет из html academy
А у них есть курс по свг и как его рисовать через css
https://htmlacademy.ru/courses/130
Для таких простых элементов вроде изогнутой линии вполне можно заморочиться и сделать

svg

svg через defer и потом через use дергать. Оптимально, удобно, стилизуемо через css

проще и быстрей всего- нарисовать в иллюстраторе и сохранить как SVG, а потом как обычную картинку

Еще способ: border-image с repeat