Help crop the waveform with the clip-path. Below is an example of how we would like.

    3 answers 3

    I wrote the answer for two days, I could not get the gradient to work in the snippet under the sea wave. The application works fine in all modern browsers, but the gradient does not want to work only here in the snippet.
    The solution is fully adaptive. Download the file and it will work for you!

    clip-path with the help of CSS rules draws (cuts out) only in straight lines.
    Support curves in css yet. Therefore, to implement your "wave" without clipPath SVG can not do. But the decision will be fully adaptive!

      * { margin:0; padding:0; } .comm { width:100%; height:100%; position: relative; background: linear-gradient(to top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); } .container { width:100%; height:189; position: absolute; top:0; } 
     <div class="comm"> </div> <div class="container"> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1022 189" > <defs> <clipPath id="myPath"> <path d="M0.1-0.9-0.5 124.7c0 0 27.5 11.4 41.5 16.3 16.4 5.8 32.9 11.5 49.8 15.7 21.5 5.4 43.4 9.2 65.4 12.1 22 2.9 44.2 4.6 66.4 5.4 24.4 0.8 48.9 0.4 73.3-0.9 22.2-1.2 44.3-3.7 66.3-6.1 20.4-2.3 40.8-5 61.1-7.9 23-3.2 46-6.9 69-10.5 18.1-2.8 36.1-5.9 54.1-8.7 19.8-3 39.6-5.9 59.4-8.7 19.2-2.7 38.4-5.5 57.6-7.9 15.4-1.9 30.8-3.7 46.3-5.2 17.5-1.8 35-3.6 52.6-4.6 17.4-1 24.8-1.8 52.2-1.5 25.1 0.2 31.4 0.8 47.1 1.7 14 0.8 28 1.6 41.9 3.5 31.2 4.3 53.1 10.9 53.1 10.9 0 0 30.1 8.8 44.5 14.9 7.3 3.1 21.1 11.1 21.1 11.1l0.3-155z" /> </clipPath> </defs> <rect width="100%" height="100%" fill="#C8EFD0" clip-path="url(#myPath)" /> </svg> </div>

      You write the path for the wave in SVG, designate it as <clipPath> and use it later in CSS. Borrowed the wave code from a nearby example.

       body { margin: 0; } .bg { width: 1020px; background: linear-gradient(0deg, #ff0777, #7c00ff); } .clip { height: 300px; background-color: #fff; clip-path: url(#wave); } 
       <svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clipPath id="wave"> <path fill="dodgerblue" d="m 0,0 v 127.45743 l 76.200758,24.61975 71.326822,16.40863 c 48.77893,8.55961 95.53725,9.44091 141.41698,6.98355 121.77621,-12.67261 245.5939,-31.27999 370.11305,-49.43849 21.66434,-3.15929 43.34992,-4.50925 65.04967,-7.73936 61.18759,-8.39196 118.10962,-6.16958 174.69798,-0.76382 55.25083,6.05784 98.89736,20.04482 123.08504,43.21074 l 0.3274,-161.16733812 z"/> </clipPath> </defs> </svg> <div class=bg> <div class=clip></div> </div>

        This can be (in this case, path ) implemented using any vector editor (Inkscape, Illustrator, etc.)

         * { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; } 
         <svg width="800" height="500" viewBox="0 0 1000 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path fill="dodgerblue" d="m 0,0 v 127.45743 l 76.200758,24.61975 71.326822,16.40863 c 48.77893,8.55961 95.53725,9.44091 141.41698,6.98355 121.77621,-12.67261 245.5939,-31.27999 370.11305,-49.43849 21.66434,-3.15929 43.34992,-4.50925 65.04967,-7.73936 61.18759,-8.39196 118.10962,-6.16958 174.69798,-0.76382 55.25083,6.05784 98.89736,20.04482 123.08504,43.21074 l 0.3274,-161.16733812 z"/> </svg>

        • This option is not suitable, because the gradient, and not the pure color, goes below the picture. That is why only the option with the clip-path is suitable, but I don’t understand how to make a smooth wave with it - Mimzik