<div class="container">
      <svg viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
  <image mask="url(#mask)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="04eadd2b-7dd4-43fc-af3d-cff948811986_balloons.jpg.webp" width="400" height="300"></image>
</svg>
    
      
    </div>
    

/* Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 */

/* CSS files add styling rules to your content */

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 400px;
  height: 300px;
  margin: 1em auto;
}