Путь, нарисованный с помощью GeometryReader, неточен

Я работаю над простым видом, в котором onAppear рисуется путь от 3-го круга до первого, а затем ко второму. Я использую GeometryReader и PreferenceKey, чтобы получить реальные позиции. Похоже, я правильно определил центр круга, но кажется, что он сместился немного ниже, чем должно быть.
Может ли кто-нибудь указать, что не так?

Вот мой код:

struct ScreenPath: View {
    @State private var end = CGFloat.zero
    
    var positions: [CGPoint]
    var body: some View {
        Path { lineBuilder in
            let pathSequence = [positions[2], positions[0], positions[1]]
            if let start = pathSequence.first {
                lineBuilder.move(to: start)
                lineBuilder.addLine(to: pathSequence[1])
                lineBuilder.addLine(to: pathSequence[2])
            }
        }
        .trim(from: 0, to: end)
        .stroke(Color.green, lineWidth: 4)
        .animation(.easeIn(duration: 1.5))
        .onAppear {
            self.end = 1
        }
    }
}

struct HomeScreen: View {
    @State private var circlePositions: [CGPoint] = []
    @State private var colors: [Color] = [.white, .white, .white, .white]
    @State private var showPath: Bool = false
    
    var body: some View {
        GeometryReader { geo in
            
            ZStack {
                if showPath {
                    ScreenPath(positions: circlePositions)
                }  
                VStack(spacing: 30) {
                    VStack(spacing: 45) {
                        HStack {
                            Circle()
                                .fill(colors[0])
                                .frame(width: 30, height: 30)
                                .background(GeometryReader { circleGeo in
                                    
                                    Color.clear.preference(key: CirclePositionKey.self, value: [circleGeo.frame(in: .global).center])
                                })
                            
                            Spacer().frame(width: 50)
                            
                            Circle()
                                .fill(colors[1])
                                .frame(width: 30, height: 30)
                                .background(GeometryReader { circleGeo in
                                    Color.clear.preference(key: CirclePositionKey.self, value: [circleGeo.frame(in: .global).center])
                                })
                        }
                        
                        HStack {
                            Circle()
                                .fill(colors[2])
                                .frame(width: 30, height: 30)
                                .background(GeometryReader { circleGeo in
                                    Color.clear.preference(key: CirclePositionKey.self, value: [circleGeo.frame(in: .global).center])
                                })
                            
                            Spacer().frame(width: 50)
                            
                            Circle()
                                .fill(colors[3])
                                .frame(width: 30, height: 30)
                                .background(GeometryReader { circleGeo in
                                    Color.clear.preference(key: CirclePositionKey.self, value: [circleGeo.frame(in: .global).center])
                                })
                        }
                    }
                    
                    
                    
                }
                .frame(width: geo.size.width, height: geo.size.height, alignment: .center)
            }
            .onPreferenceChange(CirclePositionKey.self) { positions in
                if positions.count == 4 {
                    circlePositions = positions
                    for position in positions {
                        print("Circle position: \(position)")
                    }
                }
            }
            .onAppear {                
                colors[0] = .green
                colors[1] = .green
                colors[2] = .green
                
                showPath.toggle()
            }
        }
        .border(Color.red)
    }
}

extension CGRect {
    var center: CGPoint {
        return CGPoint(x: self.midX, y: self.midY)
    }
}

struct CirclePositionKey: PreferenceKey {
    typealias Value = [CGPoint]
    
    static var defaultValue: [CGPoint] = []
    
    static func reduce(value: inout [CGPoint], nextValue: () -> [CGPoint]) {
        value.append(contentsOf: nextValue())
    }
}