How to get transparent wavy border effect on image

Question

I managed to get the wavy border effect on an image but for my case I need the wavy border to be transparent:

This (below) is exactly what I would like. Any idea how I could achieve this?

I know the wave shape isn't exactly the same, but you get the point. I don't care about the shape as much as I care about making it transparent somehow. Making the wave the same color as the background is out of the question because the background color and items can vary :(

.wrapper {
  width: 500px;
  height: 500px;
  background: #0A3C6D;
  margin: 0 auto;
  padding: 50px;
}

.item {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.wave {
  margin-top: -20px;
  height: 200px;
  clip-path: url(#wave);
  background-color: purple;
}

.inner {
  position: relative;
  width: 100%;
  height: 90%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://placekitten.com/500/500');
}

<div class="wrapper">
    <div class="item">
        <div class="inner"></div>
        <div class="wave"></div>
        <svg>
            <clipPath id="wave" clipPathUnits="objectBoundingBox">
                <path class="st0" d="M1,0c0,0-0.3,0.1-0.5,0.1S0.3,0,0,0.1V1h1L1,0z"></path>
            </clipPath>
        </svg>
    </div>
</div>