D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
clhenrick
Full window
Github gist
D3 Canvas color transition
D3 Canvas color transition
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> html, body { margin:0;position:relative; width: 100%; height: 100%; background: #222 } canvas { position: absolute; display: block; top: calc(50% - 200px); left: calc(50% - 200px);} </style> </head> <body> <canvas id="canvas" width=400 height=400></canvas> <script> var canvas = d3.select("#canvas"); var context = canvas.node().getContext('2d'); var i = d3.interpolateLab('red', 'purple'); var setColor = function setColor(val) { context.clearRect(0,0,400,400); context.fillStyle = val; context.arc(200, 200, 200, 0, 2 * Math.PI, true); context.fill(); context.closePath(); } var x = 0; var t = d3.interval(function() { if (x < 1) { x += 0.01; setColor(i(x)); } else { x = 0; } }, 100); </script> </body>
https://d3js.org/d3.v4.min.js