Как сделать blur по форме svg?

Question

[vahromeevilya-widestudio]

Для карточки необходимо сделать blur только по этой форме



А на данный момент blur захватывает всю область карточки. Как этого избежать?



Пощупать https://codepen.io/vahromeevilya-widestudio/pen/MWQqdom

P.S. RAX7 Надеюсь увидишь вопрос)

Comments

[RAX7]

В той дэмке к предыдущему вопросу используется clip-path на элементе к которому применен backdrop-filter: blur. И в варианте с border-image тоже придется использовать clip-path

[vahromeevilya-widestudio]

RAX7, Я пробовал поиграть с clip path. Я изначально и зашел на твою демку, чтобы посмотреть как ты реализовал. Но что то не вышло, поэтому и решил задать вопрос) Хорошо сейчас попробую что нить сделать с clip path

[vahromeevilya-widestudio]

RAX7, Ничего не получилось. =( Не знаю как маштабировать clipPath и сделать так чтобы он зависел от ширины и высоты родителя ( нужна в других карточках где динамически меняется размер и масштаб )

[RAX7]

vahromeevilya-widestudio, используй CSS clip-path: polygon, для него можно использовать calc примерно так:

.el {
  clip-path: polygon(
    50px 0,
    calc(100% - 50px) 0,
    100% 50px,
    100% calc(100% - 50px),
    calc(100% - 50px) 100%,
    50px 100%,
    0 calc(100% - 50px),
    0 50px
  );
}

[vahromeevilya-widestudio]

RAX7, Ага, работает. А как быстро подогнать clip path под нужную форму?

[RAX7]

vahromeevilya-widestudio, там на карточке всего 9 точек для clip-path, не так уж это долго, если не отвлекаться

[vahromeevilya-widestudio]

RAX7, Понял)Я прост думал вдруг есть генератор clip path из "d" . Что ж поработаем ручками