<div class="header">
  <h1>Simple SVG header</h1>
  <svg width="1000" height="100" viewBox="0 0 1000 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0
             L 400 0 
             L 300 90
             L 0 100
             L 0 0
             "
            fill="#a6a03b"
          />
      <path d="M0 0
             L 950 0 
             L 900 30
             L 0 80
             L 0 0
             "
            fill="#b4d455"
          />
    <path d="M0 0
             L 900 0 
             L 600 80
             L 200 100
             L 0 0
             "
            fill="#848f45"
          />
    <path d="M0 0
             L 600 0 
             L 450 100
             L 0 80
             L 0 0
             "
            fill="#b4d455"
          />
  </svg>
  </div>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p>
svg {
  width:100%;
  height:auto;
  display: block;
  margin: -10px -10px 0;
}
.header {
  top: 0;left: 0;right: 0;
  position: relative;
  color:white;
  position: fixed;
  h1 {
    position: absolute;
    top: 40%;left: 2%;
    transform:translateY(-50%);
    max-width:100%;
    font-weight: normal;
    margin: 0;
    
  }
}


body {
  font:1em Verdana,sans-serif;
  color:#343;
  
  margin:0;
  padding: 10px;
  padding-top:10%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.