scroll curve
section {
position: absolute;
width: 100%;
height: calc(100% - 200px);
background: #2ABBFF;
}
section .curve {
position: absolute;
bottom: -200px;
height: 200px;
width: 100%;
transform-origin: top;
}
section .curve img {
height: 100%;
width: 100%;
}
<section>
<span class="curve">
<img src="curve.png" alt="">
</span>
</section>
var scroll = document.querySelector('.curve');
window.addEventListener('scroll', function() {
var value = 1 + window.scrollY/-500;
scroll.style.transform = `scaleY(${value})`
});