Add drop shadow to SwiftUI Path elements - ios

Question

I have a rudimentary ClockView build with SwiftUI. :) My question is if applying drop shadows to the clock-hands is easily possible with this approach or if i need a different layout and grouping of the elements? I've tried to find a way to add shadows to Path, but got stuck. Thank you.
Code
import SwiftUI
struct ClockView: View {
#Binding var time : TimeValue
let hoursHandWidth = 10
let minutesHandWidth = 10
let secondsHandWidth = 10
var body: some View {
return(
ZStack {
// clock-face
Path { path in
let seconds : Path = Path(CGRect(x: 100, y: -0.5, width: 10, height: 1))
for i in 0...60 {
…
}
}
.fill(Color(red: 0.3, green: 0.3, blue: 0.3, opacity: 1.0))
Path { path in
let hours : Path = Path(CGRect(x: 100, y: -1, width: 12, height: 2))
for i in 0...12 {
…
}
}
.fill(Color(red: 0.3, green: 0.3, blue: 0.3, opacity: 1.0))
Path { path in
let threehours : Path = Path(CGRect(x: 95, y: -2, width: 20, height: 4))
for i in 0...4 {
…
}
}
.fill(Color.red)
// clock-hands
Path { path in
let minutehand : Path = Path(CGRect(x: 0, y: -(minutesHandWidth/2), width: 95, height: minutesHandWidth))
path.addPath(minutehand, …)
}
.fill(Color.blue)
Path { path in
let hourhand : Path = Path(CGRect(x: 0, y: -(hoursHandWidth/2), width: 72, height: hoursHandWidth))
path.addPath(hourhand, …)
}
.fill(Color.blue)
Path { path in
let secondshand : Path = Path(CGRect(x: 0, y: -(secondsHandWidth/2), width: 97, height: secondsHandWidth))
path.addPath(secondshand, …)
}
.fill(Color.yellow)
.animation(.easeInOut)
Path { path in
path.addPath(Path(CGPath(ellipseIn: CGRect(x: -5, y: -5, width: 10, height: 10), transform: nil)))
}
.fill(Color.black)
}
.offset(CGSize(width: 150, height: 150))
.frame(width: 300, height: 300, alignment: .topLeading)
.scaleEffect(1.2)
.background(Color(red: 0.8, green: 0.8, blue: 0.8, opacity: 1.0))
)
}
}
Look
** Update **
I've applied .shadow(..) as user Asperi recommended:
Path { path in
let secondshand : Path = Path(CGRect(x: 0, y: -(secondsHandWidth/2), width: 97, height: secondsHandWidth))
path.addPath(secondshand, transform: .init(rotationAngle: 2.0 * CGFloat.pi * CGFloat(time.seconds-15)/60.0))
}
.fill(Color.yellow)
.shadow(color: .black, radius: 8, x: 1, y: 1)
But the result is not exactly what i expected :)

Answer 1

I've moved the transformation (rotation) from the subpath to the resulting path. Now it looks good.
Old:
Path { path in
let secondshand : Path = Path(CGRect(x: 0, y: -(secondsHandWidth/2), width: 97, height: secondsHandWidth))
path.addPath(secondshand, transform: .init(rotationAngle: 2.0 * CGFloat.pi * CGFloat(time.seconds-15)/60.0))
}
.fill(Color.yellow)
.shadow(color: .black, radius: 2)
New:
Path { path in
let secondshand : Path = Path(CGRect(x: 0, y: -(secondsHandWidth/2), width: 97, height: secondsHandWidth))
path.addPath(secondshand)
}
.fill(Color.yellow)
.shadow(color: .black, radius: 2)
.transformEffect(CGAffineTransform(rotationAngle: 2.0 * CGFloat.pi * CGFloat(time.seconds-15)/60.0))
Look (new):

Answer 2

Here is an example
Path { path in
let secondshand : Path = Path(CGRect(x: 0, y: -(secondsHandWidth/2), width: 97, height: secondsHandWidth))
path.addPath(secondshand)
}
.fill(Color.yellow)
.shadow(color: .black, radius: 8, x: 4, y: 1)