Lowpoly Dynamic Background

index.html

<a class="content" href="javascript:history.go(0)">
						<h2>Change Background</h2> </a>

lowpoly-dynamic-background.markdown

Lowpoly Dynamic Background

Generates On page load, dynamic shapes and color

A Pen by Nodws on CodePen.

License.

script.js

//by @nodws
/*
Using trianglify.js and d3.js library
Also not possible without Tim Berners Lee creator of the www, Brendan Eich creator of javascript, Michael S. Dell founder of Dell Computer who manufactured my PC, my Mom and Dad who manufactured me and The BigBang creator of the universe.
Hope these credits are enough  to satisfy my impostor syndrome 
*/
//Click to change bg
var rn = Math.floor((Math.random() * 150) + 60);
var rs = Math.floor((Math.random() * 11) + 4);
	var t = new Trianglify({
 x_gradient: Trianglify.colorbrewer.Spectral[rs],
    noiseIntensity: 0,
    cellsize: rn
});
var pattern = t.generate(window.innerWidth, window.innerWidth+200);
document.body.setAttribute('style', 'background-image: '+pattern.dataUrl);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/trianglify/0.1.5/trianglify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

style.css

html,body{
  height:100%;
  overflow:hidden;
}
body{
  background:#E1D38A;
  background-size:cover;
  font-family:sans-serif;
  text-align:center;
  padding-top:20%
}

.content {
	width: 400px;
	background: #fff;
	padding: 30px;
	text-align: center;
	z-index: 995;
  box-shadow:0 3px 36px 0 rgba(0, 0, 0, 0.6);
  display:inline-block;
  opacity:0.7;
  color:#666;
  text-decoration:none;
  transition:all 0.2s
}

.content:hover{
  box-shadow:0 3px 6px 0 rgba(0, 0, 0, 0.3);
  padding:40px;
  margin-top:-10px;
  color:#444
}