Размытие SVG по маске, как осуществить?

Question

[ksvrn]

Есть svg, нужно применить фильтр blur чтобы было как на картинке. Подскажите, как сделать такое или хотя бы в какую сторону смотреть. Сломала голову в поисках решения (

Важный момент: интересуют именно svg маски/фильтры для svg.

Абстрактный код:

<svg>
  <defs>
    .... ???
  </defs>
  <g>
    <path d="..."/>
    <path d="..."/>
    <path d="..."/>
  </g>
</svg>

Answer 1

[Ivan Bogachev]

хотя бы в какую сторону смотреть?

Смотрите в сторону создания двух слоев с одним и тем же содержимым. К верхнему применяется размытие и маска из градиента. А дальше нужно играть с параметрами до достижения желаемого результата.

Можно и в обратную сторону - нижний размывать, а к верхнему применять маску, только противоположных цветов.

Comments

[ksvrn]

спасибо! надеялась, что можно будет обойтись без дублирования содержимого, но, видимо, увы

Answer 2

[profesor08]

Первая ссылка в гугле
css.yoksel.ru/svg-masks

Comments

[ksvrn]

первая ссылка в гугле для тех, кто невнимательно читает вопрос.