What is the best way to get this shape (image attached) to be fully functional?

Question

I have some problem with html/css/svg shape. I don't know how to do this in a good way.

As you can see in attached image I have a circle which I want to fill up with some images. This shape is rounded on top and bottom. I ve tried to do this with clip-path but is not what I expect. Is there a solution that will make this shape fully functionaly like div? (clickable,hoverable,treated as image) I have to put more than one shape to make a whole circle/ring and don't want it crumbled like a house of cards. Is copy and rotate this is a good way?

Already I ve tried to build it in svg and then copy and rotate x times. But svg area is square and then object will overlap with each other (like B on my image). I don't know if this is a good conception to do this.

<div id="mainContainer">
<svg class='crop-shapes'>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="400">
            <image xlink:href="https://oralcancerfoundation.org/wp-content/uploads/2016/03/people.jpg" x="-30" y="-50"
                width="400" height="267" />
        </pattern>
    </defs>
  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
    <path d="M 15 100 L 0 100 Q 85 150 165 100 L 135 0 Q 85 25 35 0 L 0 100" fill="url(#img1)"/>
  </a> 
</svg>

</div>

 <style>
  #mainContainer{
    height:800px;
    width:800px;
    border:1px solid blue;
  }
  svg{
    height:125px;
    width:165px;
    border:1px solid red;
    margin:0 auto;
  }