Как сделать SVG с полупрозрачным фоном и прозрачным отверстием?

Question

[Vadim Stepanenko]

Как можно сделать подобную штуку?

Как я понял, оптимальный вариант svg, который будет накладываться поверх контента (position: fixed). Розовый кружок - полностью прозрачное отверстие. Желтый фон - полупрозрачный. И собственно вопрос, как вообще такое можно сделать?

Думал сделать png-шку и просто накладывать поверх контента, но нужно, чтобы кружок был фикс ширины.

Answer 1

[Ankhena]

Обычный псевдо с радиальным градиентом
https://jsfiddle.net/b6oqpr5L/

Альтернатива: border-radius и огромная тень

Comments

[v3shin]

А что лучше с точки зрения быстродействия: задавать псевдоэлементу полупрозрачность или делать полупрозрачный градиент? Или разница несущественна?

[Vadim Stepanenko]

К сожалению, не совсем то :(
Если будет #test { ..., width: 100%, height: 100vh} (то есть не фикс размеры), то круг растягивается в овал

Но спасибо за ответ

[Ankhena]

Vadim Stepanenko,

то круг растягивается в овал

логично
сделайте, чтобы не трансформировался
css.yoksel.ru/radial-gradients

Дополнила ответ другим вариантом, возможно, он понравится вам больше.