Skip to content

Instantly share code, notes, and snippets.

@1Cr18Ni9

1Cr18Ni9/.block

Created September 3, 2018 09:32
Show Gist options
  • Save 1Cr18Ni9/11f08495a90cf4df2ac199414daef017 to your computer and use it in GitHub Desktop.
Save 1Cr18Ni9/11f08495a90cf4df2ac199414daef017 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas Animation
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
canvas { display: block; margin-left: atuo; margin-right: auto; }
</style>
</head>
<body>
<canvas id="box" width="400" height="400"></canvas>
<script>
var box = document.getElementById("box");
var ctx = box.getContext("2d");
var PI = Math.PI, sin = Math.sin, cos = Math.cos;
var rad = 0, step = PI / 8, R = 180, r = 5;
var cx = box.width / 2, cy = box.height / 2;
var tt, end, offset = 0, rotate = 0;
function animate () {
ctx.save();
ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
ctx.fillRect(0, 0, box.width, box.height);
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.translate(cx, cy);
ctx.rotate(rotate);
ctx.setLineDash([10, 5]);
ctx.lineDashOffset = offset;
ctx.beginPath();
for (rad = 0; rad < PI * 2; rad += step) {
ctx.moveTo(0, 0);
tt = {
x: (R * 0.5) * cos(rad - 0.7),
y: (R * 0.5) * sin(rad - 0.7)
};
end = {
x: R * cos(rad),
y: R * sin(rad)
};
ctx.quadraticCurveTo(tt.x, tt.y, end.x, end.y);
}
ctx.stroke();
for (rad = 0; rad < PI * 2; rad += step) {
ctx.beginPath();
end = {
x: R * cos(rad),
y: R * sin(rad)
};
ctx.arc(end.x, end.y, r, 0, PI * 2);
ctx.fill();
}
ctx.beginPath();
ctx.arc(0, 0, r, 0, PI * 2);
ctx.fill();
ctx.restore();
if (offset < 500) { offset += 0.5; }
else { offset = 0; }
if (rotate < PI * 2) { rotate += 0.02; }
else { rotate = 0; }
requestAnimationFrame(animate);
}
animate();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment