Создание зернистого градиента CSS / SVG

Question

Есть ли способ добиться такого как на изображении зернистого градиента, при помощи CSS или SVG ? Я нашел вот такой метод, но он меня не устраивает поскольку он переоприделяет изображение находящееся под фильтром и добавляет собственные цвета в шум.

body {
  padding: 0;
  margin: 0;
}


.main {
  position: relative;
  height: 100vh;
  width: 100%;
  border-radius: 4px;
  background: radial-gradient(65.71% 224.86% at 65.71% 51.25%, rgba(255, 17, 51, 0.4) 0%, rgba(255, 17, 51, 0) 100%), #1F1F1F;
}


.main:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 4px;
  background: repeat center / contain url('data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20232%20232%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cfilter%20id%3D%27noiseFilter%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%272.7%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23noiseFilter%29%27%2F%3E%3C%2Fsvg%3E');
}

<div class="main"></div>

БЛОГ НА HUSL

Создание зернистого градиента CSS / SVG

Ответы (0 шт):