How to make a mask layout?

Question

css

prntscr.com/8rxie1 - there is a shape with a photo overlaid on it. How to implement this in layout?

Answer 1

<div class="result"> <!-- position: relative -->
 <div class="photo"></div> <!-- position: absolute, z-index: 10 -->
 <div class="shape"></div> <!-- position: absolute, z-index: 20 -->
</div>

Answer 2

Such a complex mask can be implemented by overlaying png, with a transparent place instead of a photo, on top of the photo. The bottom layer is a photo, the top layer is a png with a transparent center.
Hardly a layout with a vector. Svg won't work. css has pretty primitive mask options