11 DECEMBER 2019

Steps to create an SVG wave background

1. Set a background color

Background color

use a gradient if you wish

HTML

<div style="background-color: #3E2888; padding-top: 150px; padding-bottom: 150px;">
    ...
</div>

2. Add some background circles. These can help fill up the space and give more curves

Add circles

These give some additional visuals

HTML

<div class="panel-outer">
    <div class="panel-content">
        <h1>CSS circles</h1>
        <p>These give some additional visuals</p>
    </div>

    <div class="background-circle left-circle">
        <!--Left side circle-->
    </div>

    <div class="background-circle right-circle">
        <!--Right side circle-->
    </div>
</div>

CSS

.panel-outer {
	background-color: #3E2888;
	overflow: hidden;
	position: relative;
	padding-top: 150px;
	padding-bottom: 150px;
}
    
.panel-content {
	position: relative;
	z-index: 2;
	text-align: center;
	color: #FFF;
}

.background-circle {
	z-index: 1;
	height: 0%;
	border-radius: 50%;
	display: block;
	position: absolute;
}

.left-circle {
	width: 90%;
	top: -30%;
	left: -65%;
	padding-bottom: 80%;
	background-color: #493695;
}

.right-circle {
	width: 100%;
	top: -30%;
	right: -90%;
	padding-bottom: 100%;
	background-color: #4F3CaB;
}

3. Add an SVG wave

SVG image

Finally add the SVG

HTML

<div class="panel-outer">
    <div class="svg-background">
        <div class="text-block">
            <h1>SVG image</h1>
            <p>Finally add the SVG</p>
        </div>
    </div>

    <div class="background-circle left-circle">
    <!--Left side circle-->
    </div>

    <div class="background-circle right-circle">
    <!--Right side circle-->
    </div>
</div>

CSS

.panel-outer {
	background-color: #3E2888;
	overflow: hidden;
	position: relative;
}

.svg-background {
	background-image: url(/images/purplewave.svg);
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
	z-index: 2;
	padding-top: 150px;
	padding-bottom: 150px;
}

.text-block {
	text-align: center;
	color: #FFF;
}

.background-circle {
	z-index: 1; 
	height: 0%;
	border-radius: 50%;
	display:block;
	position: absolute;
}

.left-circle {
	width: 90%;
	top: -30%;
	left: -65%;
	padding-bottom: 80%;
	background-color: #493695;
}

.right-circle {
	width: 100%;
	top: -30%;
	right: -90%;
	padding-bottom: 100%;
	background-color: #4F3CaB;
}

SVG

*Feel free to use this in your project. Save it in a file called 'purplewave.svg' and update the url in the CSS above to point to where you save it (mine was in '/images/purplewave.svg').

You can change the two 'stop-color' hex values to change the color of the fade.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" viewBox="0 0 640 640" width="800" height="800"><defs><path d="M-13.61 417.13C18.05 394.38 37.84 380.16 45.75 374.47C72.57 355.19 82.93 320.21 70.94 289.44C66.32 277.6 75.01 299.9 70.94 289.44C56.36 252.03 59.61 210.02 79.77 175.3C88.15 160.88 73.39 186.29 79.77 175.3C104.88 132.06 100.1 77.7 67.82 39.51C61.88 32.48 47.03 14.91 23.28 -13.2L-13.61 -13.2L-13.61 417.13Z" id="c28f1N5a0m"></path><radialGradient id="gradienta1q1WmGbVT" gradientUnits="userSpaceOnUse" cx="41.08" cy="-13.2" dx="41.08" dy="417.13" r="430.33"><stop style="stop-color: #6d6acf;stop-opacity: 1" offset="0%"></stop><stop style="stop-color: #41418f;stop-opacity: 1" offset="100%"></stop></radialGradient></defs><g><g><g><use xlink:href="#c28f1N5a0m" opacity="1" fill="url(#gradienta1q1WmGbVT)"></use></g></g></g></svg>