I am using following code to display success with circle and checkmark

struct CheckMarkView: View {
  @State var borderInit: Bool = false
  @State var spinArrow: Bool = false
  @State var dismissArrow: Bool = false
  @State var displayCheckmark: Bool = false
  
  var body: some View {
      ZStack {
          Circle()
              .strokeBorder(style: StrokeStyle(lineWidth: borderInit ? 10 : 64))
              .frame(width: 128, height: 128)
              .foregroundColor(borderInit ? .white : .black)
              .animation(.easeOut(duration: 3).speed(1.5))
              .onAppear() {
                  borderInit.toggle()
              }
          
          // Arrow Icon
          Image(systemName: "arrow.2.circlepath")
              .frame(width: 80, height: 80)
              .font(.largeTitle)
              .foregroundColor(.white)
              .rotationEffect(.degrees(spinArrow ? 360 : -360))
              .opacity(dismissArrow ? 0 : 1)
              .animation(.easeOut(duration: 2))
              .onAppear() {
                  spinArrow.toggle()
                  withAnimation(Animation.easeInOut(duration: 1).delay(1)) {
                      self.dismissArrow.toggle()
                  }
              }
          
          // Checkmark
         Path { path in
              path.move(to: CGPoint(x: 20, y: -40))
              path.addLine(to: CGPoint(x: 40, y: -20))
              path.addLine(to: CGPoint(x: 80, y: -60))
          }
          .trim(from: 0, to: displayCheckmark ? 1 : 0)
          .stroke(style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
          .foregroundColor(displayCheckmark ? .white : .black)
          .offset(x: 150, y: 420)
          // .animation(.spring(.bouncy, blendDuration: 2).delay(2))
          .animation(Animation.interpolatingSpring(stiffness: 150, damping: 10, initialVelocity: 0).delay(2))
          //  .animation(Animation.interpolatingSpring(mass: 1, stiffness: 100, damping: 10, initialVelocity: 0).delay(2))
          .onAppear() {
              displayCheckmark.toggle()
          }

    }

    .background(.black)
  }

}


#Preview {
    CheckMarkView()
        .frame(width: 128, height: 128)

}

When i try to add frame CheckMarkView to CheckMarkView image and circle displayed at different place. Checkmark should be displayed within the circle. Also checkmark animation is not smooth at end. How to resolve this issue. Any help would be appreciated.

Thanks