quilt block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3fc/10.1.0/d3fc.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/gh/riccardoscalco/textures/textures.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    
    var numX = 7;
    var numY = 10;
    var sqWidth = 150;
    var sqHeight = 150;
    var pad = 5;
    var interval = 500;
    var color1 = "rgba(255, 163, 176, 1)";
    var color2 = "rgba(238, 187, 56, 1)";
    var color3 = "rgba(74, 238, 204, 1)";
    
    var texts = [
    	textures.lines()
      	.size(8)
      	.strokeWidth(1)
      	.background(color1),
      textures.lines()
      	.orientation("vertical", "horizontal")
    		.size(8)
    		.strokeWidth(1)
    		.shapeRendering("crispEdges")
      	.background(color2),
    	textures.lines()
      	.lighter()
      	.background(color3),      	
      textures.circles()
      	.heavier()
        .background(color2),
      textures.circles()
      	.background(color1),
      textures.paths()
      	.d("crosses")
      	.lighter()
      	.thicker()
        .background(color2),
      textures.paths()
      	.d("waves")
      	.background(color3),
      textures.paths()
      	.d("nylon")
      	.lighter()
      	.background(color3),
    ];
    
    //select random integer for array index
    var getRandomInt = function getRandomInt(min, max) {
    	min = Math.ceil(min);
    	max = Math.floor(max);
    	return Math.floor(Math.random() * (max - min + 1)) + min;
  	}
    
    //select 
  	var randomTexture = function() {
    	var idx = getRandomInt(0, 7);
    	console.log(idx);
    	var idxT = texts[idx];
    	return idxT;
  	}

//create a space to append an svg element
      var svgContainer = d3.select("body").append("svg")
        .attr("width", sqWidth*numX)
        .attr("height", sqHeight*numY);
    
  //self-invoking function to loop over textures 
  (function theLoop (i) { 
    setTimeout(function () {
      //create squares
      for (var j = 0; j < numX; j++) {
        console.log(j);
        var xpos = j*(sqWidth);

for (var k = 0; k < numY; k++) {
          var ypos = k*(sqHeight);
          var t = randomTexture();
          svgContainer.call(t);
          var square = svgContainer.append("rect")
            .attr("x", xpos)
            .attr("y", ypos)
            .attr("width", sqWidth)
            .attr("height", sqHeight)
            .style("fill", t.url());
        }
      }
			//if decrement i and still > 0, keep going bc 0 evaluates to false
      //if (--i && i>0)
      if (--i) {
        //call loop again and pass it current value of i
        theLoop(i);
      }
    }, 500);
  })(10);	//5 passed to theLoop for value of i
 
    
  </script>
</body>

Updated missing url https://cdn.rawgit.com/riccardoscalco/textures/master/textures.min.js to https://cdn.jsdelivr.net/gh/riccardoscalco/textures/textures.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3fc/10.1.0/d3fc.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js

https://cdn.rawgit.com/riccardoscalco/textures/master/textures.min.js

https://d3js.org/d3-timer.v1.min.js

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