Using geometry reader to Center the Rectangle - swiftui

Question

I'm trying to use GeometryReader to make a Card View (to use in a card game).
This Card is going to have 3 Shapes on it.
I'm trying to center these 3 Shapes using GeometryReader (starting with the first shape, Rectangle), but it doesn't work.
What am I doing wrong?
Here's how I WANT it to look like: Here's how I want it to look like
Here's how it ACTUALLY looks like: Here's how it actually looks like
struct Card: View {
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 10.0).stroke(lineWidth: 3)
VStack {
GeometryReader { geometry in
Rectangle()
.size(
width: geometry.size.width * 0.75,
height: geometry.size.height * 0.75
)
.position(
x: geometry.size.width / 2,
y: geometry.size.height / 2
)
}
GeometryReader { geometry in
Circle()
.size(
width: geometry.size.width * 0.75,
height: geometry.size.height * 0.75
)
.position(
x: geometry.size.width / 2,
y: geometry.size.height / 2
)
}
GeometryReader { geometry in
Rectangle()
.size(
width: geometry.size.width * 0.75,
height: geometry.size.height * 0.75
)
.position(
x: geometry.size.width / 2,
y: geometry.size.height / 2
)
}
}
}
.foregroundColor(Color.orange)
}
}

Answer 1

Here is possible variant of layout. Tested with Xcode 12 / iOS 14
struct Card3: View {
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 10.0).stroke(lineWidth: 3)
GeometryReader { geometry in
VStack {
Color.clear.overlay(Rectangle()
.frame(
width: geometry.size.width * 0.75,
height: geometry.size.height / 3 * 0.75
))
Color.clear.overlay(Circle()
.frame(
width: geometry.size.width * 0.75,
height: geometry.size.height / 3 * 0.75
))
Color.clear.overlay(Rectangle()
.frame(
width: geometry.size.width * 0.75,
height: geometry.size.height / 3 * 0.75
))
}.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
.foregroundColor(Color.orange)
}
}