xxxxxxxxxx
<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>
<div class="drawing">
<div id="grid-black"></div>
<div id="grid"></div>
</div>
<script type="text/javascript">
// 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