How to fix gradient color on SVG - html

Question

I am a beginner and I am trying to use gradient color on SVG. But the color is not matching with the previous div.
I have used gradient color on .test and the color is:
background: linear-gradient(
60deg,
rgba(84, 58, 183, 1) 0%,
rgba(0, 172, 193, 1) 100%
);
I have used SVG on .test-2 div. I want it seems like there is no partition between the two divs.
Here is an image:
My Codes:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.test {
background: linear-gradient(
60deg,
rgba(84, 58, 183, 1) 0%,
rgba(0, 172, 193, 1) 100%
);
width: 100%;
height: 65vh;
text-align: center;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<div class="test">
<h1>Demo Text</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat aspernatur nemo accusantium soluta quidem cum obcaecati amet, deserunt, quo cupiditate quam vel excepturi quas laboriosam consequuntur sapiente! Necessitatibus, nesciunt quae non, optio cumque assumenda commodi minima qui quo animi a! Laudantium inventore vero est sunt. Facere incidunt quisquam debitis ipsa maiores totam excepturi nesciunt perferendis repudiandae eum. Esse tenetur nemo asperiores nihil autem dolor atque molestias amet quaerat consequatur? Iste delectus culpa atque voluptates debitis voluptatem fuga, ab mollitia earum quibusdam ipsum numquam soluta, quia molestiae animi nisi obcaecati rem aliquid amet? Quam beatae sunt ad dolores numquam magni ratione!</p>
</div>
<div class="test-2">
<svg id="wave" style="transform:rotate(180deg); transition: 0.3s" viewBox="0 0 1440 300" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0" gradientTransform="rotate(60)"><stop stop-color="rgba(84, 58, 183, 1)" offset="0%"></stop><stop stop-color="rgba(0, 172, 193, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,30L80,65C160,100,320,170,480,200C640,230,800,220,960,180C1120,140,1280,70,1440,80C1600,90,1760,180,1920,205C2080,230,2240,190,2400,165C2560,140,2720,130,2880,105C3040,80,3200,40,3360,55C3520,70,3680,140,3840,170C4000,200,4160,190,4320,180C4480,170,4640,160,4800,150C4960,140,5120,130,5280,115C5440,100,5600,80,5760,85C5920,90,6080,120,6240,140C6400,160,6560,170,6720,145C6880,120,7040,60,7200,70C7360,80,7520,160,7680,200C7840,240,8000,240,8160,215C8320,190,8480,140,8640,105C8800,70,8960,50,9120,65C9280,80,9440,130,9600,130C9760,130,9920,80,10080,70C10240,60,10400,90,10560,100C10720,110,10880,100,11040,115C11200,130,11360,170,11440,190L11520,210L11520,300L11440,300C11360,300,11200,300,11040,300C10880,300,10720,300,10560,300C10400,300,10240,300,10080,300C9920,300,9760,300,9600,300C9440,300,9280,300,9120,300C8960,300,8800,300,8640,300C8480,300,8320,300,8160,300C8000,300,7840,300,7680,300C7520,300,7360,300,7200,300C7040,300,6880,300,6720,300C6560,300,6400,300,6240,300C6080,300,5920,300,5760,300C5600,300,5440,300,5280,300C5120,300,4960,300,4800,300C4640,300,4480,300,4320,300C4160,300,4000,300,3840,300C3680,300,3520,300,3360,300C3200,300,3040,300,2880,300C2720,300,2560,300,2400,300C2240,300,2080,300,1920,300C1760,300,1600,300,1440,300C1280,300,1120,300,960,300C800,300,640,300,480,300C320,300,160,300,80,300L0,300Z"></path></svg>
</div>
How can I do that?
[Please run the snippet in full screen]

Answer 1

You must merg both parts.
You can do this through Adobe Illustrator or online tools such as https://editor.method.ac/. and export as svg file.
then use svg file as background image.

Answer 2

I got it very close to perfect for you:
<div class="test">
<h1>Demo Text</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat aspernatur nemo accusantium soluta quidem cum obcaecati amet, deserunt, quo cupiditate quam vel excepturi quas laboriosam consequuntur sapiente! Necessitatibus, nesciunt quae non, optio cumque assumenda commodi minima qui quo animi a! Laudantium inventore vero est sunt. Facere incidunt quisquam debitis ipsa maiores totam excepturi nesciunt perferendis repudiandae eum. Esse tenetur nemo asperiores nihil autem dolor atque molestias amet quaerat consequatur? Iste delectus culpa atque voluptates debitis voluptatem fuga, ab mollitia earum quibusdam ipsum numquam soluta, quia molestiae animi nisi obcaecati rem aliquid amet? Quam beatae sunt ad dolores numquam magni ratione!</p>
</div>
<div class="test-2">
<svg id="wave" style="transform:rotate(180deg); transition: 0.3s" version="1.1" viewBox="0 0 1440 300" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0%" y1="0%" x2="100%" y2="0%"><stop stop-color="rgba(0, 172, 193, 1)" offset="0%"></stop><stop stop-color="rgba(84, 58, 183, 1)" offset="10%"></stop></linearGradient></defs><path style="opacity:1" fill="url(#sw-gradient-0)" d="M0,30L80,65C160,100,320,170,480,200C640,230,800,220,960,180C1120,140,1280,70,1440,80C1600,90,1760,180,1920,205C2080,230,2240,190,2400,165C2560,140,2720,130,2880,105C3040,80,3200,40,3360,55C3520,70,3680,140,3840,170C4000,200,4160,190,4320,180C4480,170,4640,160,4800,150C4960,140,5120,130,5280,115C5440,100,5600,80,5760,85C5920,90,6080,120,6240,140C6400,160,6560,170,6720,145C6880,120,7040,60,7200,70C7360,80,7520,160,7680,200C7840,240,8000,240,8160,215C8320,190,8480,140,8640,105C8800,70,8960,50,9120,65C9280,80,9440,130,9600,130C9760,130,9920,80,10080,70C10240,60,10400,90,10560,100C10720,110,10880,100,11040,115C11200,130,11360,170,11440,190L11520,210L11520,300L11440,300C11360,300,11200,300,11040,300C10880,300,10720,300,10560,300C10400,300,10240,300,10080,300C9920,300,9760,300,9600,300C9440,300,9280,300,9120,300C8960,300,8800,300,8640,300C8480,300,8320,300,8160,300C8000,300,7840,300,7680,300C7520,300,7360,300,7200,300C7040,300,6880,300,6720,300C6560,300,6400,300,6240,300C6080,300,5920,300,5760,300C5600,300,5440,300,5280,300C5120,300,4960,300,4800,300C4640,300,4480,300,4320,300C4160,300,4000,300,3840,300C3680,300,3520,300,3360,300C3200,300,3040,300,2880,300C2720,300,2560,300,2400,300C2240,300,2080,300,1920,300C1760,300,1600,300,1440,300C1280,300,1120,300,960,300C800,300,640,300,480,300C320,300,160,300,80,300L0,300Z"></path> </svg>
</div>
and
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.test {
background: linear-gradient(60deg,rgba(84, 58, 183, 1) 19%,rgba(0, 172, 193, 1) 88%);
width: 100%;
height: 65vh;
text-align: center;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Link to fiddle