In this example we have only one object, a plane. The fragment-shader of the plane receives a list of particles [xy,color,size] and paints it appropriately.
Both canvas use a simple implementation of blending [SRC_ALPHA, ONE]: the source is the current particle we are evaluating, while the color is the color we already accumulated painting the other objects/particles.
color = source * source.a + color;
The idea for this example came from an image I had in my head. Not sure where I saw something like it, I think some movies. The original idea was to do something like what you see in the first canvas, simply different lights shinning. The idea for the second canvas I found it playing with the parameters of the vertex shader: in the first one the background is black with alpha = 1, but in the second one the alpha of the background is 0.
So, in the first canvas our variable color always has alpha = 1, and that is why we see the complete circle. The transparency is simulated by multiplying the source color by its alpha. In the second canvas the final alpha is a combination of the alphas of all the intersecting circles: is the sum of the squares of the alphas.