Color issue when circles overlap

Hi, I am running into an issue trying to create this effect. I am trying to make new circles for each mousePressed that have the same gradient border. To achieve the orange border I have added an orange stroke, and the white fill so the center of the circles are not solid orange. But here is the issue: As I keep creating new circles, the inside of the existing circles overlap the new circles and takes away from the color. I am left with a transparent orange after creating more circles. What I want is for all new circles to appear in its entirety on top of all the circles underneath, and that the old circles have 0 effect on the color of the new circles. How can I achieve this?
Thank you in advance!

ArrayList<Circle> circles;
int circleSize = 100;
int xPos = -circleSize;
int yPos = -circleSize;

void setup(){
  circles = new ArrayList<Circle>();
  circles.add(new Circle(-10000, -10000, 0, circleSize));

void draw(){  
   for (int i = 0; i < circles.size(); i++) { 
    Circle circle = circles.get(i);

void mousePressed(){
  circles.add(new Circle(mouseX, mouseY, 0, circleSize));

class Circle {
  float x;
  float y;
  float w;
  float w2;

  Circle(float tempX, float tempY, float tempW, float tempW2) {
    x = tempX;
    y = tempY;
    w = tempW;
    w2 = tempW2;
  void display() {
    w = w + 1;


Hello @tomashau,

This created the effect in the image:

size(200, 200);

int x=100, y=100, w=80;

  for(int r=w, s=255; r<w+40; r = r+5, s-=25) // Increase r (radius) and decrease s (stroke)
    stroke(255, 255, 0, s);
    circle(x, y, r);


  • background(0) was used at start of draw.
  • P3D was used and speeded things up.
  • P2D was very slow compared to P3D.
  • You may want to consider removing circles from ArrayList once they are out of the sketch window.
  • noFill() was used in my efforts.


Integrated with your code:

This was a quick first pass at this and just one way of doing it.
I leave the rest with you…