Sol LeWitt 289

<html>
<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<title>Sol LeWitt Wall Drawing 289</title>
	<style type="text/css">
		body {
			background: #000;
			margin: 0;
		}
		.drawing {
			margin: 0;
			text-align: center;

}
		#lines {
			width:100%;
			height: 100%;
		}

line {
		  stroke: #fff;
		  stroke-width: 3;
		}
	</style>
</head>
<body>

function sol289() {
var svg = d3.select('#lines')
	.append('svg')
	.attr("width", "100%")
	.attr("height", "100%");

function getRandomArbitrary(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

for (var topright = 0; topright < numLines; topright++) {	
				data.push({
				id: id,
				class: "topright",
				x1: ww,
				y1: 0,
				x2: getRandomArbitrary(0, ww),
				y2: getRandomArbitrary(0, wh)
			})
			id++;
		}

for (var bottomright = 0; bottomright < numLines; bottomright++) {		
				data.push({
				id: id,
				class: "bottomright",
				x1: ww,
				y1: wh,
				x2: getRandomArbitrary(0, ww),
				y2: getRandomArbitrary(0, wh)
			})
			id++;
		}

for (var bottomleft = 0; bottomleft < numLines; bottomleft++) {		
				data.push({
				id: id,
				class: "bottomleft",
				x1: 0,
				y1: wh,
				x2: getRandomArbitrary(0, ww),
				y2: getRandomArbitrary(0, wh)
			})
			id++;
		}

for (var middleleft = 0; middleleft < numLines; middleleft++) {		
				data.push({
				id: id,
				class: "middleleft",
				x1: 0,
				y1: wh/2,
				x2: getRandomArbitrary(0, ww),
				y2: getRandomArbitrary(0, wh)
			})
			id++;
		}

for (var middleright = 0; middleright < numLines; middleright++) {		
				data.push({
				id: id,
				class: "middleright",
				x1: ww,
				y1: wh/2,
				x2: getRandomArbitrary(0, ww),
				y2: getRandomArbitrary(0, wh)
			})
			id++;
		}

for (var middletop = 0; middletop < numLines; middletop++) {		
				data.push({
				id: id,
				class: "middletop",
				x1: ww/2,
				y1: 0,
				x2: getRandomArbitrary(0, ww),
				y2: getRandomArbitrary(0, wh)
			})
			id++;
		}

for (var middlebottom = 0; middlebottom < numLines; middlebottom++) {		
				data.push({
				id: id,
				class: "middlebottom",
				x1: ww/2,
				y1: wh,
				x2: getRandomArbitrary(0, ww),
				y2: getRandomArbitrary(0, wh)
			})
			id++;
		}
	return data;
}

var lineData = lineData();
console.log(lineData);

/*var row = svg.selectAll(".row")
	.data(lineData)
	.enter().append("g")
	.attr("class", "row");*/

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
	 d3.selectAll("svg").remove();
	 sol289();
});
 
 
</script>

https://d3js.org/d3.v4.min.js

https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js