Как правильно реализовать отсечение фонового изображение?

Question

[Hecktosaurus]

Изображение

На странице по краям распределены пикрелейтед эллипсы. В фигме сетка реализована невидимым фоновым svg, сверху наложен эллипс, который задаёт область видимости (layer: pass through).

Не могу сообразить, как это сделать в CSS? Хотелось бы установить для body background с "сеточным" svg, а отдельными div'ами устанавливать области, где эта сетка будет видна

Comments

[Алексей Дубровин]

1) В svg есть маски.
2) Выгрузить итоговую картинку?

[Hecktosaurus]

Алексей Дубровин, выгрузить итоговую - повторяться будет в разных частях экрана, с разной формой. С svg-маской не работал, по идее её нужно прописать внутри самого svg? тогда тоже придётся под каждый экземпляр отдельный svg делать

Answer 1

[Rst0]

CSS/clip-path

Comments

[Hecktosaurus]

А можно сделать плавное к краям угасание?

[Rst0]

так?

[Hecktosaurus]

Rst0, не совсем, чтобы как в скрине из моего поста - условно, в центре 100% видимости сетки, и плавно к краю она снижалась до 0

[Rst0]

ну тогда возможно и так:

без clip-path,
просто дивами + box-shadow в цвет переменной
var(--background-color)