Заполнение div волнистой дорожкой SVG

<svg height="150" width="880"> 
  <path d="M 0 100 q 40 -40 80 0 q 40 40 80 0 q 40 -40 80 0 q 40 40 80 0 q 40 -40 80 0 q 40 40 80 0 q 40 -40 80 0 q 40 40 80 0  q 40 -40 80 0 q 40 40 80 0 q 40 -40 80 0 l 0 50 l -880 0 z" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)"/> 
</svg>

html,body{margin:0;padding:0;} 
div{ 
  background: url('http://i.imgur.com/qi5FGET.jpg'); 
  background-size:cover; 
  overflow:hidden; 
} 
svg{display:block;}

<div> 
  <h1>title</h1> 
  <p>whatever content<br/>with several lines</p> 
  <svg viewbox="0 0 60 10"> 
    <pattern x="-7.5" id="waves" patternUnits="userSpaceOnUse" width="10" height="10"> 
      <path d="M0 10 V5 Q2.5 2.5 5 5 T10 5 V10" fill="#FFC338" /> 
    </pattern> 
    <rect x="0" y="0" width="60" height="10" fill="url(#waves)"/> 
  </svg> 
</div>

let canvas = document.querySelector("canvas"); 
let ctx = canvas.getContext("2d"); 
 
function draw() { 
  let width = window.innerWidth; 
  let height = window.innerHeight; 
  canvas.width = width; 
  canvas.height = height; 
   
  ctx.clearRect(0, 0, width, height); 
 
  ctx.fillStyle = "#FFFF00"; 
   
  ctx.beginPath(); 
  ctx.moveTo(0, height / 2); 
   
  for (let x = 0, amplitude = 30; x < width; x++) { 
    let y = Math.sin(x / amplitude * Math.PI / 2) * amplitude; 
    ctx.lineTo(x, y + height / 2); 
  } 
   
  ctx.lineTo(width, height); 
  ctx.lineTo(0, height); 
  ctx.lineTo(0, height / 2); 
    
  ctx.fill(); 
} 
 
draw(); 
 
window.addEventListener("resize", draw);

html, body { 
  overflow: hidden; 
  width: 100vw; 
  height: 100vh; 
  margin: 0; 
  padding: 0; 
   
  background: red; 
}

<canvas></canvas>