Edit in JSFiddle

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function ( /* function */ callback, /* DOMElement */ element) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

var canvas = document.getElementById('playground'),
    ctx = canvas.getContext('2d'),
    interval,
    particles = [],
    num = 200,
    maxAngle = 0.0,
    maxRadius = 300,
    Particle = function (x, y, drawRadius) {
        this.x = x;
        this.y = y;
        this.radius = drawRadius;
    };

//initialize particles
for (var i = 0; i < num; i++) {
    particles.push(new Particle(0, 0, 5));
}

function update(time) {
    for (var i = 0; i < particles.length; i++) {
        var radius = maxRadius * i / particles.length;
        var theta = maxAngle * i;

        var x = (canvas.width / 2) + radius * Math.sin(theta);
        var y = (canvas.height / 2) + radius * Math.cos(theta);

        particles[i].x = x;
        particles[i].y = y;
    }

    maxAngle += 0.000004;
    
    draw();
    requestAnimFrame(update);
}


function draw() {
    ctx.clearRect(0,0,1000,450);
    for (var i = 0; i < particles.length; i++) {
        ctx.beginPath();
        ctx.fillStyle = (i === 0 || i === 50 || i === 100 || i === 150 || i === 199) ? "red" : "blue";
        ctx.arc(particles[i].x, particles[i].y, particles[i].radius, 0, 2 * Math.PI, false);
        ctx.fill();
    }
}

requestAnimFrame(update);
<div>
    <canvas id='playground' width='1000' height='450'>Really Awesome Content</canvas>
</div>