I am working on an overlay effect that consists of 2 strokes, preview of it can be seen below (green strokes)
So far I was able to achieve it only by using 2 overlay elements like this:
.overlay {
ZStack {
RoundedRectangle(cornerRadius: 18, style: .continuous)
.inset(by: -2)
.stroke(.green.opacity(0.2), lineWidth: 4)
RoundedRectangle(cornerRadius: size18, style: .continuous)
.strokeBorder(.green)
}
}
But using 2 elements here feels excessive? I was trying to see if there is a simpler solution where I could use single rounded rectangle but force second stroke to be drawn outside of it instead of in the center?