<svg viewBox="0 2 498 270" id="svg">
  <defs>
    <clipPath id="clip">
        <path id="path" d="M0,0 500,0 500,150 C500,150 250,350 0,150" />
    </clipPath>
  </defs>

  
  <image href="https://marant.ru/upload/iblock/9e6/polotentse_indigo_pembe_50kh90.jpg" width="1024px" height="683px" x="0" y="0" clip-path="url(#clip)"/>
  
<path id="path" d="M0,0 500,0 500,150 C500,150 250,350 0,150" fill="none" stroke="red" stroke-width="2px"/>
  
  <g>
    <circle cx="250" cy="230" r="40" fill="#fff" stroke="red" stroke-width="2" />
    <circle cx="60" cy="188" r="40" fill="#fff" stroke="red" stroke-width="2" />
    <circle cx="150" cy="220" r="40" fill="#fff" stroke="red" stroke-width="2" />
    <circle cx="350" cy="220" r="40" fill="#fff" stroke="red" stroke-width="2" />
    <circle cx="450" cy="188" r="40" fill="#fff" stroke="red" stroke-width="2" />
  </g>
</svg>

  

html,body{
  margin: 0;
}