Skip to content

Instantly share code, notes, and snippets.

@aaronlidman

aaronlidman/index.html

Forked from reneras/spin.js
Last active December 10, 2015 01:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaronlidman/4359702 to your computer and use it in GitHub Desktop.
Save aaronlidman/4359702 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<body>
<canvas id="demo" height="640" width="640" style="background-color: white;"></div>
</body>
<script type="text/javascript">
var canvas = document.getElementById('demo');
var context = canvas.getContext('2d');
var start = new Date();
var lines = 12,
cW = context.canvas.width,
cH = context.canvas.height;
var draw = function() {
var rotation = parseInt(((new Date() - start) / 1000) * lines) / lines;
context.save();
context.clearRect(0, 0, cW, cH);
context.translate(cW / 2, cH / 2);
context.rotate(Math.PI * 2 * rotation);
for (var i = 0; i < lines; i++) {
context.beginPath();
context.rotate(Math.PI * 2 / lines);
context.moveTo(cW / 10, 0);
context.lineTo(cW / 4.5, 0);
context.lineWidth = cW / 30;
context.strokeStyle = "rgba(0,0,0," + i / lines + ")";
context.stroke();
}
context.restore();
};
window.setInterval(draw, 30);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment