Center an off screen SwiftUI view

Question

I am trying to create a screen with a horizontally centered circle that is bigger than the actual screen's width. Unfortunately, I do not know how to center it horizontally and pin it to the top . Is there an easy way to achieve such results with SwiftUI?

struct DemoView: View {
    private let circleBackgroundPercentage: CGFloat = 1.3
    
    var body: some View {
        ZStack {
            GeometryReader { geometry in
                VStack(alignment: .center) {
                    Circle()
                        .fill(Color.yellow)
                        .frame(width: geometry.size.width * circleBackgroundPercentage, height: geometry.size.height * circleBackgroundPercentage, alignment: .center)
                }
            }
            Text("Demo")
        }.edgesIgnoringSafeArea(.all)
    }
}

]

Answer 1

Here is possible approach to solve such kind to task.

Prepared with Xcode 12.4/iOS 14.4

var body: some View {
    ZStack {
        VStack {
            Color.yellow
                .clipShape(Circle())
            Color.clear
        }
        .scaleEffect(1.8)   // << tune factor as needed !!
        Text("Demo")
    }.edgesIgnoringSafeArea(.all)
}

backup

Answer 2

Use offset(x:y:)

Offset this view by the specified horizontal and vertical distances. - https://developer.apple.com

Align horizontally in the center.

.offset(x: -(((geometry.size.width * circleBackgroundPercentage) - geometry.size.width)) / 2)

---

You can use a similar technique for y position to pin the circle at the top.

---

You can also use position(x:y:) . Fore more info, read this articel https://www.hackingwithswift.com/books/ios-swiftui/absolute-positioning-for-swiftui-views