How to make circle disappear over time

I want to pop that green circle when I clicked to the window on cursors position and disappear it overtime. Like MOBA Games(League of Legends)

I tried to set circle position to mouse position every time I clicked and not change it through the loop(because I want it to stay where I clicked not follow the mouse). And also to disappear the circle I tried to update radius and opacity of circle every second. But the result was instant disappear of circle. I also tried different methods and loops to update radius and opacity like playing with numbers or using while method instead of for loop. But the result was instant appear and disappear of circle or crash error. Here is my code:

void draw_cursor()
{
    if (IsMouseButtonPressed(MOUSE_BUTTON_LEFT))
    {
      float currentPosX = GetMousePosition().x;
      float currentPosY = GetMousePosition().y;
      float cursor_radius = 10.0f;
      int cursor_opacity = 200;
      for (float cursor_radius_for = cursor_radius; cursor_radius_for > 0; cursor_radius_for -= 1)
      {
          if (deltaTime() * 60 > 0)
          {
              cursor_radius -= cursor_radius / 20 * deltaTime() * 60;
              cursor_opacity -= cursor_opacity / 20 * deltaTime() * 60;
          }
          DrawCircle(currentPosX, currentPosY, cursor_radius, (Color){0, 255, 0, cursor_opacity});
      }
    }    
}

Like I mentioned above this code pops up the circle just for a millisecond and then it disappears. But I want that to be slow not an instant action.

I'm not familiar with raylib, so take my answer as an educated guess.

Judging by the readme, this framework seems to be similar to many other drawing frameworks like p5.js, where you have a draw loop and some privatives that helps you clear the canvas and draw shapes, text, etc. This has many implications that impact how you design your code. One of them is that the draw loop should complete for each frame.

In the code you provided, you are drawing all the circles in draw_cursor, without 'taking a break' and giving the opportunity to the main loop to iterate and actually draw the frame to screen. This has the effect of drawing only one single (long) frame, and then moving on. You should in fact see your app to be apparently hanging for the lifetime of your circle.

I think this should do the job:

#define CIRCLE_LIFETIME 60 // in seconds
#define CIRCLE_FADE_TIME 20 // in seconds

void draw_cursor()
{
  static bool isCircleVisible = false;
  static float circleX, circleY;
  static double circleBirth; // timestamp when user clicked left mouse button 

  if (IsMouseButtonPressed(MOUSE_BUTTON_LEFT))
  {
    isCircleVisible = true;
    circleX = GetMousePosition().x;
    circleY = GetMousePosition().y;
    circleBirth = GetTime();
  }

  double now = GetTime();
  if (isCircleVisible && (now - circleBirth) > CIRCLE_LIFETIME + CIRCLE_FADE_TIME)
  {
    isCircleVisible = false;
    return;
  }

  if (isCircleVisible)
  {
    float fadeTimeDone = max(0, now - circleBirth - CIRCLE_LIFETIME);
    float progress = 1 - fadeTimeDone / CIRCLE_FADE_TIME;
    float radius = 10 * progress;
    int opacity = (int)(255 * progress);

    DrawCircle(circleX, circleY, radius, (Color){0, 255, 0, opacity});
  }
}

This is a simplified version of what you might need: this handles only one circle at a time (if the user clicks another time the previous circle disappears), but should answer your question.