Как сверстать такой шестиугольник?

Question

[Егор Астрейко]

Подскажите, как можно сверстать такой шестиугольник:

Изначально выглядит вот так

А при ховере

1. Нужно что бы середина этого шестиугольника была прозрачная и была видна картинка на заднем фоне.
   
2. Что бы при наведении круг плавно заполнял этот шестиугольник и не выходил за рамки.
   

Сначала подумал про clip-path, что бы обрезать круг, но тогда не получается сделать рамку.
Потом пробовал делать шестиугольник при помощи псевдоэлементов, рамка ок, но круг вылазит.
Как быть?

Comments

[twobomb]

свг?

[Егор Астрейко]

twobomb, если использовать svg, то вроде бы же нельзя будет изменять толщину рамки ?

[Максим]

Егор Астрейко, можно изменять в svg ВСЁ

[Rustam Bainazarov]

SVG.