<div class="container">
<svg id="svg-bg" viewBox="0 0 102 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g stroke="none" fill="none">
		<polygon
				id="star"
				fill="#F7BD83"
				points="51 79.5 19.8473816 95.8779007 25.7970023 61.1889504 0.594004636 36.6220993 35.4236908 31.5610496 51 0 66.5763092 31.5610496 101.405995 36.6220993 76.2029977 61.1889504 82.1526184 95.8779007"
				data-0="fill:rgb(130,200,60);"
				data-1000="fill:rgb(255,200,120);"
				data-2000="fill:rgb(230,170,235);"></polygon>
	</g>
</svg>
</div>
#svg-bg {
  width: 300px;
  left: 50%;
  margin-left: -150px;
  position: fixed;
  top: 10%;
  z-index: -1;
}
.container {
  text-align: center;
  height: 3500px;
}
skrollr.init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js