How to make a block wrap around an image, an adaptive curvature of the side of the block, an adaptive arch for the logo?

Question

css

It is necessary to make such an adaptive bend above the logo, I sort of made the bend, but the edge is uneven and the bend is not adaptive, it is necessary that when the page is reduced / enlarged, the bend remains above the logo. What is the best and right way to do it? I did the bend of the white block like this, and it has an uneven edge and is not
responsive .head {
background: radial-gradient(ellipse 190% 1300% at 25.2% 118%, transparent 5.5%, white 40px);
}
and I just drew an oval
.oval {
width: 265px;
height: 70px;
background: #969696;
border-radius: 50%
color:white;
display:flex;
justify-content: center;
position: relative;
}
The first image is how to do it, the second and third how I did it.

Answer 1

Try playing around with it.

Answer 2

if the wrapping is not uniform (judging by the screenshot), then you need to add relativity to the dark gray block, and make the wrapping on the :before pseudo-element with absolute positioning.

Answer 3

Set a border for the logo of the same color as the background under it.

{
border: 5px #CCC;
}