Как сделать такой эффект размытия вокруг блока с gif?

Question

[mbhusty]

Всем привет!
Есть вот такой блок в макете


Это гифка в круге, но вокруг нее есть еще свечение, которое зависит от контента самого gif файла, т.е динамическое.

Пробовал разные варианты, но всегда либо видно квадратные границы, либо размытие просто ограничивается кругом.

Кто может подсказать, как это реализовать?

https://jsfiddle.net/md16bx90/

Comments

[Вадим]

filter: blur для псевдо?

[mbhusty]

Вадим, да, но тогда как я и написал, мы увидим либо квадратные границы, либо размытие просто ограничится кругом

[Вадим]

mbhusty, Ну Вы демку сделайте и посмотрим. А то на пальцах так себе обсуждать проблему.

[mbhusty]

если я правильно понимаю, то тут придется использовать 2 элемента наложением, один их которых будет с блюром

[mbhusty]

Вадим, upd https://jsfiddle.net/md16bx90/

[Вадим]

mbhusty, js fiddle не работает в РФ без VPN. Если хотите чтобы на Ваши ответы реагировали быстрее, то демку сейчас лучше размещать на codepen.

Но я пока ждал - набросал сам:


В такой реализации что-то Вам не подходит?

[mbhusty]

Вадим,
вот тут видно проблему о которой речь

[Вадим]

mbhusty, Ну да, проблема именно с гифкой. В Вашу демку если поставить картинку то всё ок.

[mbhusty]

Вадим, поэтому и возник этот вопрос)

[Вадим]

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

[Вадим]

mbhusty, но вариант выше далеко не идеальный, т.к. контент в таком случае будет не круглый, а своей исходной формы. То есть тут тогда уже сама гифка должны быть с круглым контентом, чтобы было ок.