SVG not full width and space

Joined
Dec 23, 2021
Messages
5
Reaction score
0
Hi,

I am using SVG codes to do a wave effect on the top and the bottom of a DIV. Just like Shape Divider on Elementor, but I am using SVG codes here as it is an HTML page.

The issue is, for the top SVG, I am not being able to make it full width, 100%. The bottom is working fine I see. And if you see for top SVG, there is a small space in white between it and the DIV. See image attached and codes below.

How to get the top SVG full width and space removed? You can copy and paste the whole code on a notepad, you will see it.


Code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1440" height="100" preserveAspectRatio="none" viewBox="0 0 1440 100">
    <g mask="url(&quot;#SvgjsMask1018&quot;)" fill="none">
        <rect width="1440" height="100" x="0" y="0" fill="rgba(255, 255, 255, 1)"></rect>
        <path d="M 0,2 C 72,18.2 216,79.6 360,83 C 504,86.4 576,23.4 720,19 C 864,14.6 936,64.6 1080,61 C 1224,57.4 1368,13 1440,1L1440 100L0 100z" fill="rgba(245, 245, 245, 1)"></path>
    </g>
    <defs>
        <mask id="SvgjsMask1018">
            <rect width="1440" height="100" fill="#ffffff"></rect>
        </mask>
    </defs>
</svg>
<div style="width:100%;height:500px;padding:20px;box-sizing:border-box;background-color:#f7f7f7;">
    <h1>ccece</h1>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1440" height="100" preserveAspectRatio="none" viewBox="0 0 1440 100">
    <g mask="url(&quot;#SvgjsMask1016&quot;)" fill="none">
        <rect width="1440" height="100" x="0" y="0" fill="rgba(245, 245, 245, 1)"></rect>
        <path d="M 0,2 C 72,18.2 216,79.6 360,83 C 504,86.4 576,23.4 720,19 C 864,14.6 936,64.6 1080,61 C 1224,57.4 1368,13 1440,1L1440 100L0 100z" fill="rgba(255, 255, 255, 1)"></path>
    </g>
    <defs>
        <mask id="SvgjsMask1016">
            <rect width="1440" height="100" fill="#ffffff"></rect>
        </mask>
    </defs>
</svg>
 

Attachments

  • ss.png
    ss.png
    23.5 KB · Views: 7

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,754
Messages
2,569,529
Members
45,001
Latest member
Kendra00E1

Latest Threads

Top