How to add custom wavy shape divider to a section

Question

I am trying to add a section which has transparent background color with background image also having shape divider.

What I did.

I have used elementor plugin for waves shape divider but it isn't working the way I like to be.

code generated by elementor.

<div class="elementor-shape elementor-shape-bottom" data-negative="false">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
    <path class="elementor-shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
    c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
    c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
</svg>      </div>

What I need.

I need the shape divider should be completely blended with section background so that it could have single look.

And the color of shape divider must be like section background.

Here is what I need to create.

What have you already tried? Post the relevant code here and see [this information on asking a good question](https://stackoverflow.com/help/how-to-ask). — Ankush, Aug 21 '18 at 09:24
Provide the code so far you have tried which make much easier to give a solution related to your code — Ramesh, Aug 21 '18 at 09:25
Possible duplicate of [Wavy shape with css](https://stackoverflow.com/questions/17202548/wavy-shape-with-css) — Gerard, Aug 21 '18 at 09:48
@EngrUmair if you are using wordpress I recommend you to use superbundle plugin for this. Just a suggestion — Ramesh, Aug 22 '18 at 11:43

score 2 · Answer 1 · answered Aug 23 '18 at 20:19

Here is the code for SVG What I needed

 <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 1502.1 1320.3" style="enable-background:new 0 0 1502.1 1320.3;" xml:space="preserve">
    <style type="text/css">
     .st0{clip-path:url(#SVGID_2_);fill:url(#SVGID_3_);}
    </style>
    <g>
     <defs>
      <path id="SVGID_1_" d="M0,26.9c134.3,4.6,658.6,50.7,732.3,57.7c0-2.2,769.8-27.1,769.8-24.9c0.2,13.7,0,1260.6,0,1260.6L0,1320.3
       C0,1320.3,0,26.9,0,26.9z"/>
     </defs>
     <clipPath id="SVGID_2_">
      <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
     </clipPath>
     <g style="clip-path:url(#SVGID_2_);">
      
       <image style="overflow:visible;" width="1476" height="692" xlink:href="86E00C1C.jpg"  transform="matrix(1.4941 0 0 1.8796 -349.3057 19.601)">
      </image>
     </g>
     
      <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="28.1822" y1="-181.5918" x2="1530.3799" y2="-181.5918" gradientTransform="matrix(1 0 0 -1 0 492)">
      <stop  offset="0.14" style="stop-color:#662D91;stop-opacity:0.72"/>
      <stop  offset="0.26" style="stop-color:#5F3194;stop-opacity:0.76"/>
      <stop  offset="0.44" style="stop-color:#4D3D9C;stop-opacity:0.86"/>
      <stop  offset="0.44" style="stop-color:#4C3E9C;stop-opacity:0.86"/>
      <stop  offset="0.56" style="stop-color:#3051A8;stop-opacity:0.8"/>
      <stop  offset="0.73" style="stop-color:#0071BC;stop-opacity:0.7"/>
      <stop  offset="0.93" style="stop-color:#096BB8;stop-opacity:0.9"/>
     </linearGradient>
     <rect x="0" y="26.9" class="st0" width="1502.2" height="1293.4"/>
    </g>
    <title>backSVG</title>
    </svg>

And Here is the PNG

How to add custom wavy shape divider to a section

1 Answers1