Skip to content

Instantly share code, notes, and snippets.

@Stroked
Created June 14, 2018 16:34
Show Gist options
  • Save Stroked/838377c109f788e7e4750423638990aa to your computer and use it in GitHub Desktop.
Save Stroked/838377c109f788e7e4750423638990aa to your computer and use it in GitHub Desktop.
RainbowBanner
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<canvas id="myCanvas" width=960 height=500>
<script src="https://d3js.org/d3.v4.0.0-alpha.45.js"></script>
<script src="https://d3js.org/d3-hsv.v0.0.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v0.3.js"></script>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
d3.range(0, width).forEach(function(x) {
d3.range(0, width).forEach(function(y) {
var myColor = d3.hcl(500 + 360 * x / width, 100, 500 * y / height);
ctx.fillStyle = myColor;
ctx.fillRect(x, y, 1, 1);
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment