Canvas Animation

<!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>

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>