Замаскируйте круглое изображение, окружающее другое изображение в CSS

Мне нужно сделать эффект с помощью HTML и CSS только с круговым изображением, окружающим другое изображение.

Вот чего я пытаюсь достичь:

В этом примере круг — это изображение SVG. Центральное изображение представляет собой PNG с border-radius.

Я думаю, что лучшим способом было бы использовать верхнюю половину основного изображения в качестве маски для изображения круга. Я искал свойства mask и clip-path, но безуспешно.

Вот мой код:

<div class = "main-image">
    <div class = "image-container">
        <img src = "uploads/main_image.png">
    </div>
    <div class = "outline-circle"></div>
</div>

.image-container {
  position: relative;
  border-radius: 9999px;
  overflow: hidden;

  img {
    width: 30vw;
    max-width: 500px;
  }
}

.outline-circle {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/circle_1.svg);
  height: 100%;
  width: 600px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

Но с помощью этого кода круг просто позиционируется поверх изображения:

Спасибо за вашу помощь,