PATTERN PLAY

forked from sarubenfeld's block: PATTERN PLAY

<html>
<head>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:360,600" rel="stylesheet">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/textures@1.0.4/textures.js"></script>
	<style type="text/css">
		body {
			font-family: 'Open Sans', sans-serif;
		}
		.drawing {
			margin: 0 auto;
			text-align: center;
			width: 1332px;
		}
		#grid {
			align-content: center;
			display: inline-block;
		}
		#grid-black {
			display: inline-block;
		}
		.description {
			width:600px;
			margin: 36px 24px;
			text-align: left;
		}
	</style>
</head>
<body>

// Big thanks to Chuck Grimmett for code and inspiration derived from his great bl.ocks on Sol LeWitt.

function gridData() {
	var data = new Array();
	var id = 1;
	var xpos = 36;
	var ypos = 36;
	var width = 288;
	var height = 288;

for (var row = 0; row < 2; row++) {
		data.push( new Array() );
		
		
		for (var column = 0; column < 2; column++) {
			data[row].push({
				id: id,
				x: xpos,
				y: ypos,
				width: width,
				height: height
			})
			
			xpos += width;
			id += 1;
		}
	
		xpos = 36;
	
		ypos += height;	
	}
	return data;
}

var gridData2 = gridData();
var gridData = gridData();

var grid = d3.select("#grid")
	.append("svg")
	.attr("width","648px")
	.attr("height","648px")
	.style("fill", "url(#animate-gradient)");

var defs = grid.append("defs");

var linearGradient = defs.append("linearGradient")
		.attr("id","animate-gradient")
		.attr("x1","0%")
		.attr("y1","0%")
		.attr("x2","100%")
		.attr("y2","0")
		.attr("spreadMethod", "pad")
  		.style("mix-blend-mode","color-dodge");
	
	var colours = ["#700961","#B80D57","#E03E36","#FF7C38"];	
	linearGradient.selectAll(".stop")
		.data(colours)
		.enter().append("stop")
		.attr("offset", function(d,i) { return i/(colours.length-1); })   
		.attr("stop-color", function(d) { return d; });

linearGradient.append("animate")
		.attr("attributeName","x1")
		.attr("values","0%;100%")
		.attr("dur","10s")
		.style("mix-blend-mode", "overlay")
		.attr("repeatCount","indefinite");

var gridBlack = d3.select("#grid-black")
	.append("svg")
	.attr("width","648px")
	.attr("height","648px")
	.style("fill", "url(#animate-gradient)");

var t1 =   textures.paths()
    	   .d("waves")
    	   .stroke("url(#animate-gradient)")
           .thicker();

t2 = textures.paths()
    	   .d("nylon")
           .lighter()
           .stroke("url(#animate-gradient)")
           .shapeRendering("crispEdges");

t3 = textures.circles()
      	    .radius(4)
    		.fill("url(#animate-gradient)")
    		.stroke("transparent")
    		.strokeWidth(2)
    	  	.complement();

t4 = textures.lines()
          .size(108)
          .stroke("url(#animate-gradient)")
          .orientation("3/8", "7/8");

gridBlack.call(t1);
 gridBlack.call(t2);
 gridBlack.call(t3);
 gridBlack.call(t4);
	
var row = gridBlack.selectAll(".row")
	.data(gridData2)
	.enter().append("g")
	.attr("class", "row")
	.style("stroke", "url(#animate-gradient)");
    	
var column = row.selectAll(".square")
	.data(function(d) { return d; })
	.enter().append("rect")
	.attr("class","square")
	.attr("x", function(d) { return d.x; })
	.attr("y", function(d) { return d.y; })
	.attr("width", function(d) { return d.width; })
	.attr("height", function(d) { return d.height; })
	.style("stroke-width", "16px")
	.style("stroke", "url(#animate-gradient)")
	.style("fill", function(d) {            
            if (d.id == 1) {return t1.url()}
            if (d.id == 2) {return t2.url()}
            if (d.id == 3) {return t3.url()}
            if (d.id == 4) {return t4.url()}  
	;})

</script>

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

https://unpkg.com/textures@1.0.4/textures.js