ive been following 100 days of swiftui and reached the days where you learn about paths and shapes. ive been playing around with aanimations and shapes and all was going well untill i touched saturation. when i was typing the code i was just trying to animate saturation from 1 to 0 and back but came out with a particular effect where the entire gradient just weirded out. heres the code.

import SwiftUI

struct ColorCyclingCircle: View, Animatable {
    var amount = 0.0
    var steps = 100.0

    var saturation = 1.0
    var brightness1 = 1.0
    var brightness2 = 0.5

    var animatableData: AnimatablePair<AnimatablePair<Double, Double>, Double> {
        get { AnimatablePair(AnimatablePair(steps, amount), saturation) }
        set {
            steps = newValue.first.first
            amount = newValue.first.first
            saturation = newValue.second
        }
    }

    var body: some View {
        ZStack {
            ForEach(0..<Int(steps), id: \.self) { value in
                Rectangle()
                    .inset(by: Double(value))
                    .strokeBorder(
                        LinearGradient(
                            gradient: Gradient(colors: [
                                color(for: value, brightness: brightness1),
                                color(for: value, brightness: brightness2)
                            ]),
                            startPoint: .top,
                            endPoint: .bottom
                        ),
                        lineWidth: 2
                    )
            }
        }
        .drawingGroup()
    }

    func color(for value: Int, brightness: Double) -> Color {
        var targetHue = Double(value) / Double(steps) + amount

        if targetHue > 1 {
            targetHue -= 1
        }

        return Color(hue: targetHue, saturation: saturation, brightness: brightness)
    }
}

struct ContentView: View {
    @State private var colorCycle = 0.0
    @State private var steps = 100.0
    @State private var saturation = 1.0
    @State private var brightness1 = 1.0
    @State private var brightness2 = 0.5

    var body: some View {
        VStack {
            ColorCyclingCircle(amount: colorCycle, steps: steps, saturation: saturation, brightness1: brightness1, brightness2: brightness2)
                .frame(width: 300, height: 300)
                .onTapGesture {
                    withAnimation(.interpolatingSpring(stiffness: 100, damping: 5)) {
                        steps += steps == 200 ? -100 : 100
                        colorCycle = colorCycle == 1 ? 0 : 1
                        saturation = saturation == 1 ? 0 : 1
                    }
                }

            Spacer()
                .frame(height: 100)

            Text("Color")
            Slider(value: $colorCycle)
            Text("Saturation")
            Slider(value: $saturation)
            Text("Brightness")
            Slider(value: $brightness1)
            Slider(value: $brightness2)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}