overflow hidden on the bottom only for an image in a complex shape

Question

I am trying to put an image in a complex shape with overflow not hidden on the top only. The shape is created with a border radius:

shape: {
  backgroundColor: '#FFF',
  width: 500,
  height: 500,
  borderRadius: '70% 30% 30% 70% / 60% 40% 60% 40%',
  position: 'relative',
  marginTop: 200,
  paddingTop: 200,
  overflow: 'hidden'
},

<div class="shape">
  <div>
    <img src="path/to/image" alt="my-image" />
  </div>
</div>

I am using parallax effect with react so I won't upload all the code, but 2 pictures to show what I would like to get:

Answer 1

Build it using two elements and play with z-index

.shape {
  background-color: #FFF;
  width: 500px;
  margin:200px 20px;
  height: 500px;
  position: relative;
  z-index:0;
}
.shape:before,
.shape:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
  box-shadow:0 0 0 100vmax blue;
  clip-path:inset(50% -100vmax -100vmax); /* cut the top */
  z-index:1;
}
.shape:after {
  clip-path:inset(-100vmax -100vmax 50%); /* cut the bottom */
  z-index:-1;
}

img {
  position:fixed;
  margin-left:50px;
  margin-top:-100px;
}

body {
  min-height:200vh;
}

<div class="shape">
    <img src="https://picsum.photos/id/1074/300/600" alt="my-image" >
</div>