dahngeek
1/12/2017 - 9:27 PM

Lined Background, tipo vilia.com

Lined Background, tipo vilia.com

function lines(){
						 var w = window.innerWidth;
						var h = 2*window.innerHeight;
						 var svg = '<svg width="'+w+'" height="'+h+'" xmlns="http://www.w3.org/2000/svg" version="1.1" style="background:#0048aa">';
						        var yRun=2*w;
						        while(yRun>-100){
								  var currx = -100;
						          var curry = yRun;
						          for(var i =0; i<20; i++){
						          	var offset = Math.ceil(10+(60*Math.random()));
						            var length = Math.ceil(60+(200*Math.random()));
						           
						            currx=currx+offset;
						            curry=curry-offset;
						            if(currx>-300 && currx<w+200 && curry>-300 && curry<h+300){
						            	svg += '<line x1="'+currx+'" x2="'+(currx+length)+'" y1="'+curry+'" y2="'+(curry-length)+'" stroke="#1054b0" stroke-width="10" stroke-linecap="round"/>';
						            }
						            currx=currx+length;
						            curry=curry-length;
						          }
						        	yRun-= 25;
						        }
						        //console.log(svg + '</svg>');
						        return svg + '</svg>';
						 }
						document.querySelector('body').style.background = "url("+'data:image/svg+xml;base64,' + window.btoa(lines())+")";
//Ojo, lo convertimos a base 64