Добрый день. Вопрос по поводу применения эффекта волны к фоновому

Question

Добрый день. Вопрос по поводу применения эффекта волны к фоновому

изображению на сайте.
Я хочу применить эффект волны к верхнему и нижнему краям фонового изображения на странице.
Вот какие действия были мной выполнены:
1. Создан файл wave.svg с эффектом волны и помещён в папку static такого типа
<svg xmlns="http://www.w3.org/2000/svg">
<mask id="wave">
<path d="M1440,100 C1340,66 1140,33 940,33 S540,100 340,100 S40,33 0,100 L0,100 Z"/>
</mask>
</svg>

2. Элементу с фоновым изображением присвоен специальный класс для применения селектора
3. В файле стилей к такому селектору применён стиль волны со ссылкой на файл с таким эффектом
.masked-el {
mask: url(../img/wave.svg#wave);
}

Однако такой стиль (эффект) не применился. В чём может быть причина?
Может путь к файлу с волной неправильный? Но у меня в папке static создана папка img, в которую я поместил данный файл, то есть вроде всё правильно. Смотрел через вкладку Network – не вижу применение данного файла.