learning coregraphics help: connecting line to circles

Hi everyone, im in the process of delving more into coregraphics with swiftui, but I am at a roadblock.

First I would like to ask, what are some good resources to learn coregraphics?

Secondly:

I currently have a circle view made and what I want to do is to make my circle view modular so that it can be directly connected to another given circle by a line. How can I do this?

For example, I want my circles to represent nodes and be able to connect by lines to other nodes that are related.

Thanks in advanced.

Here is my code for the circle view:

    @State private var circleProgress: CGFloat = 0
    let timer = Timer.publish(every: 0.016, on: .main, in: .common).autoconnect()
    private let animationDuration: TimeInterval = 1.5
    
    @Binding var startPoint: CGPoint
    @Binding var endPoint: CGPoint
    
    var body: some View {
        GeometryReader { geometry in
            Canvas { context, size in
                // Circle parameters
                let circleSize: CGFloat = 50
                let circleOrigin = CGPoint(
                    x: size.width / 4,
                    y: size.height / 2 - circleSize / 2
                )
                let circleRect = CGRect(
                    origin: circleOrigin,
                    size: CGSize(width: circleSize, height: circleSize)
                )
                let circleCenter = CGPoint(
                    x: circleOrigin.x + circleSize / 2,
                    y: circleOrigin.y + circleSize / 2
                )
                
                // Animate circle creation
                var circlePath = Path()
                circlePath.addArc(
                    center: circleCenter,
                    radius: circleSize / 2,
                    startAngle: .degrees(0),
                    endAngle: .degrees(360 * circleProgress),
                    clockwise: false
                )
                
                context.addFilter(.shadow(color: .white.opacity(0.6), radius: 5, x: 1, y: 1)) // Add white shadow
                context.stroke(
                    circlePath,
                    with: .linearGradient(
                        Gradient(colors: [.purple, .white]),
                        startPoint: circleRect.origin,
                        endPoint: CGPoint(x: circleRect.maxX, y: circleRect.maxY)
                    ),
                    lineWidth: 5
                )
            }
            .frame(width: 300, height: 150)
            .onReceive(timer) { _ in
                // Update circle progress
                let progressChange = 0.02 / animationDuration
                if circleProgress < 1.0 {
                    circleProgress = min(circleProgress + progressChange, 1.0)
                } else {
                    circleProgress = 0.0 // Reset the circle to repeat the animation
                }
                
                // Get the starting and ending points of the Canvas view
                startPoint = CGPoint(x: geometry.frame(in: .global).minX, y: geometry.frame(in: .global).minY)
                endPoint = CGPoint(x: geometry.frame(in: .global).maxX, y: geometry.frame(in: .global).maxY)
                
                // Print the points for debugging
                print("Start Point: \(startPoint.x), \(startPoint.y)")
                print("End Point: \(endPoint.x), \(endPoint.y)")
                
                
            }
        }
        .frame(width: 300, height: 150)
    }
}