Bad quality of circle stroke with gradient - swiftui

Question

Circle()
.trim(from: viewModel.lenghts[index].from, to: viewModel.lenghts[index].to)
.stroke(someGradient, style: StrokeStyle(lineWidth: 12.0, lineCap: .round, lineJoin: .round))
.rotationEffect(Angle(degrees: 270.0))
Tried set a gradient in .stroke initializer, tried to use .fill(Gradient..)
And my circle stroke looks pixelated. When use just a color (foregraundColor(Color..) all is ok. My gradient: AngularGradient(gradient: Gradient(colors: [CustomColors.red, CustomColors.pink]), center: .center, angle: .degrees(270))
What am I doing wrong? Tried linear, angular gradients

Answer 1

It seems like you've zoomed in. Try a bigger shape for better quality.
Compare these two visually identical rings and see the difference of zooming in and out:
High Quality
This one zoomed out to match the size that you are seeing.
Low Quality
This one zoomed in to match the size that you are seeing.
You can see the difference even in the text.
Full Demo code:
var body: some View {
ZStack {
Text("Low quality")
.font(.system(size: 8))
Circle()
.trim(from: 0.1, to: 0.9)
.stroke(g, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
.frame(width: 60, height: 60)
.padding(8)
}
ZStack {
Text("Hight quality")
.font(.system(size: 50))
Circle()
.trim(from: 0.1, to: 0.9)
.stroke(g, style: StrokeStyle(lineWidth: 60, lineCap: .round, lineJoin: .round))
.frame(width: 400, height: 400)
.padding(50)
}
}
Note that you can use .scaleEffect modifier to scale it with code (if you really need to)