syntagmatic/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<canvas id="painting" width=960 height=500>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var canvas = document.getElementById("painting");
var ctx = canvas.getContext("2d");

d3.timer(function(elapsed) {
	d3.range(0, canvas.width).forEach(function(x) {
		var l = 65;
		var a = -100+200*x/canvas.width
		var b = 100*Math.sin(elapsed/600)

		ctx.fillStyle = d3.lab(l,a,b)
		ctx.fillRect(x, 0, 1, canvas.height)
	})
})
</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	</style>
	<body>
	<canvas id="painting" width=960 height=500>
	<script src="https://d3js.org/d3.v4.js"></script>
	<script>
	var canvas = document.getElementById("painting");
	var ctx = canvas.getContext("2d");

	d3.timer(function(elapsed) {
	d3.range(0, canvas.width).forEach(function(x) {
	var l = 65;
	var a = -100+200*x/canvas.width
	var b = 100*Math.sin(elapsed/600)

	ctx.fillStyle = d3.lab(l,a,b)
	ctx.fillRect(x, 0, 1, canvas.height)
	})
	})
	</script>