Задать вопрос
@ksvrn
svg

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

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

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

Абстрактный код: 
<svg>
  <defs>
    .... ???
  </defs>
  <g>
    <path d="..."/>
    <path d="..."/>
    <path d="..."/>
  </g>
</svg>
  • Вопрос задан
  • 547 просмотров
Комментировать
Подписаться 3 Средний Комментировать
Решения вопроса 1
sfi0zy
@sfi0zy
Creative frontend developer
хотя бы в какую сторону смотреть?

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

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

Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08
Первая ссылка в гугле
css.yoksel.ru/svg-masks
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Java developer (Intern/Junior)
N.Academy • Москва
от 100 000 ₽
Kotlin Backend-разработчик
vivaCRM • Москва
от 200 000 до 250 000 ₽
Backend разработчик
Unicorn • Санкт-Петербург
До 350 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Ещё заказы