<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <center> <canvas id="canvas" width="1000" height="400"> </canvas> </center>

body { padding: 0px; margin: 0px; background: #ecf0f1; } #canvas { background: #3498db; width: 100%; height: 400px; }

/* * Start Config Vars */ var yPosMax = 175; var yPosMin = 125; var yPosStart = 150; var xPosStart = -50; var yPosChangeMultiplier = 60; var xPosChangeMin = 125; var xPosChangeMultiplier = 25; var yControlMultiplier = 20; var yControlMin = 40; /* * End Config Vars */ canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); context.fillStyle = '#ecf0f1'; var xPos = xPosStart; var yPos = yPosStart; context.beginPath(); context.moveTo(xPos, yPos); while (xPos < canvas.width) { lastX = xPos; xPos += Math.floor(Math.random() * xPosChangeMultiplier + xPosChangeMin); yPos += Math.floor(Math.random() * yPosChangeMultiplier - yPosChangeMultiplier/2); while (yPos < yPosMin) { yPos += Math.floor(Math.random() * yPosChangeMultiplier/2); } while (yPos > yPosMax) { yPos -= Math.floor(Math.random() * yPosChangeMultiplier/2); } controlX = (lastX + xPos)/2; controlY = yPos-Math.floor(Math.random() * yControlMultiplier + yControlMin); context.quadraticCurveTo(controlX,controlY,xPos,yPos); } context.lineTo(canvas.width,yPos); context.lineTo(canvas.width,canvas.height); context.lineTo(0,canvas.height); context.fill();