Responsive CSS wave?

Question

I have the following CSS which is creating a "wave" effect along the bottom of a hero image. I'm trying to make the waves much wider but not much taller, but I having difficulty getting the sizes to work.

Ideally I'd like a single sine wave about 20px high across the entire width of the device.

If that's not possible, adjusting the waveform to be about 20px high and around 300px wide would be great.

Thanks for any help with this!

.wave{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}
.wave::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: repeat;
    height: 10px;
    background-size: 20px 10px;
    background-image: radial-gradient(circle at 10px -5px, transparent 12px,white 13px);
}
.wave::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15px;
    background-size: 40px 40px;
    background-image: radial-gradient(circle at 10px 26px, white 20px, transparent 21px);
}

Answer 1

You can add a svg with a wave and add it on hero section

body {
        margin: 0;
        padding: 0;
        font-family: "Raleway", sans-serif;
    }

    header {
        position: relative;
        height: 500px;
        background: #0b345d;
        background-image: linear-gradient(155deg, #002f62 0%, #18496a 50%, #138b89 100%);
    }

    header h1 {
        color: white;
    }

    svg {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: auto;
    }

    section {
        margin: 5% 10%;
    }

    h1 {
        margin: 0;
        text-align: center;
    }

<header>
        <h1>Header Content</h1>
        <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="-300 0 950 270">
            <path d="M-314,267 C105,364 400,100 812,279" fill="none" stroke="white" stroke-width="120"
                stroke-linecap="round" />
        </svg>
    </header>

    <section>
        <h1>Section Content</h1>
    </section>