Есть ли способ создать на веб-странице единый процедурный эффект зернистой текстуры с помощью фильтров HTML, CSS и SVG, ⇐ CSS

[Anonymous]

Я пытаюсь создать веб-страницу, на которой пользователь может менять цветовую палитру между настраиваемыми более темными и светлыми темами. Я хочу, чтобы фон страницы был текстурирован, как на следующих изображениях, с примерно одинаковым количеством текстур, независимо от яркости основного цвета:





Чтобы избежать загрузки браузером пользователя очень больших файлов изображений и обеспечить большую гибкость в выборе размеров и ориентации экрана, Я хочу создать такую текстуру процедурно. Мне удалось получить что-то близкое к желаемому эффекту для конкретного цвета фона с помощью фильтра SVG, примененного к элементу HTML с помощью CSS, но в его текущей реализации мне нужно создать отдельный фильтр с настраиваемыми параметрами и режимами наложения для каждого цвета фона, поскольку значения, которые хорошо выглядят для одного цвета, либо слишком яркие, либо слишком тонкие для другого.
Есть ли способ воссоздать эти текстуры единым способом, который работает для любого цвета фона?
Вот как я настроил темный цвет:

Код: Выделить всё

body{
width: 100%;
height: 100%;
background: #1e1e1e;
filter: url("#texture-bg-light");
}

Код: Выделить всё

Если текстура не отображается во фрагменте, это выглядит так:


Однако, если я применю тот же фильтр к более светлому цвету например #d9dde5, я получаю вот это, которое почти не отличается от сплошного цвета:


Чтобы приблизиться к желаемому результату, мне нужно изменить конец SVG-фильтра на

Код: Выделить всё

который выглядит следующим образом:



Подробнее здесь: https://stackoverflow.com/questions/797 ... webpage-wi