Graphics artifacts

I've recently started playing with Pixi so I'm probably doing something very wrong here, but I encountered an issue when I'm drawing circles with PIXI.Graphics.

So what I attempted to do is to fill the screen with circles that don't overlap. Each circle starts with 1 radius and then grows every frame. Pretty simple. My problem starts at about ~500 circles.

It starts out ok..

But then this happens

Is drawing hundreds of circles with drawCircle() into a single Graphics object per frame bad? I don't care about performance at this time, just doing a simple circle packing exercise.

Simplified code below. No real reason to include growing and populating math here.  

I've tried putting begin Fill and line style inside the loop for every circle as well as completely outside the ticker. In the example below I have a separate loop doing math first and then another drawing circles but I tried them together too. 

I thought the long computation times for growing and populating each frame have something to do with my issue, but maybe it's a pixi/webgl limitation I have no clue about. Halp

interface Circle {
    x: number
    y: number
    r: number
}

const circles: Circle[] = [] //array filled with circle objects. 

//on then on every frame I do

public animate(delta: number) {
    for (const circle of circles) {
      growIfPossible() //simplified
    }
    populate() //adding new circles - simplified

    this.g.beginFill(0xFFFFFF)
    this.g.lineStyle(2, 0x121212)
    this.g.clear()
    for (const circle of this.circles) {
      this.g.drawCircle(circle.x, circle.y, circle.r)
    }
    this.g.endFill()
  }
}