annabsmylie/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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.rawgit.com/riccardoscalco/textures/master/textures.min.js" charset="utf-8"></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>
  <!--create a square-->
<!--   <svg width="50" height="50">
    <rect x="0" y="0" width="50" height="50"/>
  </svg> -->
  <script>


    //create a space to append an svg element
    var svgContainer = d3.select("body").append("svg")
    	.attr("width", 200)
    	.attr("height", 200)

    //create an array of textures
//     var t1 = textures.lines(),
//         t2 = textures.lines().heavier(),
//         t3 = textures.paths().d('crosses').lighter().thicker(),
//         t4 = textures.lines().thicker(),
//         t5 = textures.lines().heavier(10).thinner(1.5),
//         t6 = textures.lines().size(4).strokeWidth(1),
//         t7 = textures.lines().size(8).strokeWidth(2),
//         t8 = textures.lines().orientation('3/8').stroke('tomato'),
//         t9 = textures.paths().d('woven').lighter().thicker();

//     var t = [t1, t2, t3, t4, t5, t6, t7, t8, t9];
    // need to call each fill individually?
//     _.times(t.length, function (n) {
//         container.call(t[n]);
//     });

    var t = textures.circles();

    svgContainer.call(t);

    //append a rect element to svg space
    var square = svgContainer.append("rect")
    	.attr("x", 0)
    	.attr("y", 0)
    	.attr("width", 50)
    	.attr("height", 50)
    	.style("fill", t.url());

    var square = svgContainer.append("rect")
    	.attr("x", 50)
    	.attr("y", 0)
    	.attr("width", 50)
    	.attr("height", 50)
    	.style("fill", t.url());

    var square = svgContainer.append("rect")
    	.attr("x", 100)
    	.attr("y", 0)
    	.attr("width", 50)
    	.attr("height", 50)
    	.style("fill", t.url());

    var square = svgContainer.append("rect")
    	.attr("x", 150)
    	.attr("y", 0)
    	.attr("width", 50)
    	.attr("height", 50)
    	.style("fill", t.url());

    var square = svgContainer.append("rect")
    	.attr("x", 0)
    	.attr("y", 50)
    	.attr("width", 50)
    	.attr("height", 50)
    	.style("fill", t.url());

    var square = svgContainer.append("rect")
    	.attr("x", 50)
    	.attr("y", 50)
    	.attr("width", 50)
    	.attr("height", 50)
    	.style("fill", t.url());

    var square = svgContainer.append("rect")
    	.attr("x", 100)
    	.attr("y", 50)
    	.attr("width", 50)
    	.attr("height", 50)
    	.style("fill", t.url());

    var square = svgContainer.append("rect")
    	.attr("x", 150)
    	.attr("y", 50)
    	.attr("width", 50)
    	.attr("height", 50)
    	.style("fill", t.url());


  </script>
</body>
	<!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.rawgit.com/riccardoscalco/textures/master/textures.min.js" charset="utf-8"></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>
	<!--create a square-->
	<!-- <svg width="50" height="50">
	<rect x="0" y="0" width="50" height="50"/>
	</svg> -->
	<script>


	//create a space to append an svg element
	var svgContainer = d3.select("body").append("svg")
	.attr("width", 200)
	.attr("height", 200)

	//create an array of textures
	// var t1 = textures.lines(),
	// t2 = textures.lines().heavier(),
	// t3 = textures.paths().d('crosses').lighter().thicker(),
	// t4 = textures.lines().thicker(),
	// t5 = textures.lines().heavier(10).thinner(1.5),
	// t6 = textures.lines().size(4).strokeWidth(1),
	// t7 = textures.lines().size(8).strokeWidth(2),
	// t8 = textures.lines().orientation('3/8').stroke('tomato'),
	// t9 = textures.paths().d('woven').lighter().thicker();

	// var t = [t1, t2, t3, t4, t5, t6, t7, t8, t9];
	// need to call each fill individually?
	// _.times(t.length, function (n) {
	// container.call(t[n]);
	// });

	var t = textures.circles();

	svgContainer.call(t);

	//append a rect element to svg space
	var square = svgContainer.append("rect")
	.attr("x", 0)
	.attr("y", 0)
	.attr("width", 50)
	.attr("height", 50)
	.style("fill", t.url());

	var square = svgContainer.append("rect")
	.attr("x", 50)
	.attr("y", 0)
	.attr("width", 50)
	.attr("height", 50)
	.style("fill", t.url());

	var square = svgContainer.append("rect")
	.attr("x", 100)
	.attr("y", 0)
	.attr("width", 50)
	.attr("height", 50)
	.style("fill", t.url());

	var square = svgContainer.append("rect")
	.attr("x", 150)
	.attr("y", 0)
	.attr("width", 50)
	.attr("height", 50)
	.style("fill", t.url());

	var square = svgContainer.append("rect")
	.attr("x", 0)
	.attr("y", 50)
	.attr("width", 50)
	.attr("height", 50)
	.style("fill", t.url());

	var square = svgContainer.append("rect")
	.attr("x", 50)
	.attr("y", 50)
	.attr("width", 50)
	.attr("height", 50)
	.style("fill", t.url());

	var square = svgContainer.append("rect")
	.attr("x", 100)
	.attr("y", 50)
	.attr("width", 50)
	.attr("height", 50)
	.style("fill", t.url());

	var square = svgContainer.append("rect")
	.attr("x", 150)
	.attr("y", 50)
	.attr("width", 50)
	.attr("height", 50)
	.style("fill", t.url());




	</script>
	</body>