How to make an uneven adaptive frame with rounded edges?

Question

css

How to do this in css and svg? and also adaptive :-)

I tried to use mask and bg-size: cover - but everything floats one way or another.
Can I use some js to scale the svg?

Answer 1

https://codepen.io/topicstarter/pen/drPpdv - if you need to adapt, remove the fixed size from .items and adjust how your input fields should look like

Answer 2

Have you tried the CSS clip-path property?
Link to a convenient online generator

Answer 3

.myFormWrapper {
   background: url('myback.svg') no-repeat 50% 50%;
   background-size: cover;
   padding-bottom: 30%;
}

in the svg file itself, the usual path with a fill.
fse