How can I create the metallic rim gradient in addition to internal shadow as seen within the picture under?
Here is my code:
import SwiftUI
struct GradientDishView: View {
non-public let containerSize: CGFloat = 300
var physique: some View {
VStack {
Spacer()
ZStack {
Canvas { context, dimension in
let currentCenter = CGPoint(x: containerSize / 2, y: containerSize / 2)
let baseRadius = containerSize / 2
let innerRimRadius = baseRadius * 0.90
let fillRadius = innerRimRadius
let rimWidth = baseRadius - innerRimRadius
// internal fill
let innerPath = Path(ellipseIn: CGRect(
x: currentCenter.x - fillRadius, y: currentCenter.y - fillRadius,
width: fillRadius * 2, peak: fillRadius * 2
))
context.fill(innerPath, with: .coloration(Colour.inexperienced))
// gradient rim
let rimGradient = Gradient(colours: [
Color(white: 0.9),
Color(white: 0.9),
Color(white: 0.5),
Color(white: 0.9),
Color(white: 0.9)])
let rimCenterRadius = (baseRadius + innerRimRadius) / 2
let rimStrokePath = Path(ellipseIn: CGRect(
x: currentCenter.x - rimCenterRadius,
y: currentCenter.y - rimCenterRadius,
width: rimCenterRadius * 2,
peak: rimCenterRadius * 2
))
let gradientStart = CGPoint(x: currentCenter.x - baseRadius,
y: currentCenter.y - baseRadius)
let gradientEnd = CGPoint(x: currentCenter.x + baseRadius,
y: currentCenter.y + baseRadius)
context.stroke(rimStrokePath,
with: .linearGradient(rimGradient, startPoint: gradientStart, endPoint: gradientEnd), lineWidth: rimWidth)
}
.body(width: containerSize, peak: containerSize)
}
Spacer()
}
}
}
#Preview {
GradientDishView()
}
I am utilizing a Canvas as I’ll produce other parts drawn over it later.
Edit: I up to date the rimGradient
colours and now I can considerably get the darker gradients at 2 & 7 o’clock positions. How can I get related lighter gradients on the reverse positions? I would additionally prefer to get the internal shadow displaying.