By what principle does the transparency of the lines change?

Question

css

I would like to control the transparency parameter of lines or their number (the number is not on the screen, but between two points. There is a suspicion that the brightness of the lines depends on the fact that they are drawn not one between points, but two or more). When hovering the mouse, the lines change their transparency. Perhaps transparency does not appear there at all, but two or more lines are drawn depending on the position of the points and the mouse.
An example is here codepen.io/freislot/pen/YWJyKJ
Here is what I found along the lines

if (
              (iStar.x - jStar.x) < config.distance &&
              (iStar.y - jStar.y) < config.distance &&
              (iStar.x - jStar.x) > - config.distance &&
              (iStar.y - jStar.y) > - config.distance
            ) {
              if (
                (iStar.x - config.position.x) < config.radius &&
                (iStar.y - config.position.y) < config.radius &&
                (iStar.x - config.position.x) > - config.radius &&
                (iStar.y - config.position.y) > - config.radius
              ) {
                context.beginPath();
                context.moveTo(iStar.x, iStar.y);
                context.lineTo(jStar.x, jStar.y);
                context.stroke();
                context.closePath();
              }
            }

As I understand it, when these conditions are met, lines are drawn, but by what principle a second line appears in the same place, I did not figure it out.

Answer 1

Transparency is different because there are several of them overlapping each other.