I'm using http://raphaeljs.com/ to try and draw multiple small circles. The problem I'm having is that the canvas has a fixed width, and if I want to draw, say, 1000 circles, they don't wrap onto a 'new line' (because you have to specify the xy position of each circle).

E.g. I want this:

..................................................

to look like this:

............................

......................

At the moment I'm doing this:

for ( var i = 0; i < 1000; i++ ) {
        var multiplier = i*3;
        if ( i <= 50 ) {
            paper.circle((2*multiplier),2,2);
        } else if ( i >= 51 && i <= 101 ) {
            paper.circle((2*multiplier) - 304,8,2);
        } else if ( i >= 152 && i <= 202 ) {
            paper.circle((2*multiplier) - 910,14,2);
        }
    }

For reference: circle(x co-ord, y co-ord, radius)

This is messy. I have to add an if statement for every new line I want. Must be a better way of doing it..?