import SineWaveShape
SineWaveShape(percent: 0.4, strength: 30, frequency: 7, phase: 0)
                        .fill(color1)
                        .offset(y: CGFloat(1) * 2)
                        .animation(
                            Animation.linear(duration: duration).repeatForever(autoreverses: false)
                        )

import SwiftUI
import SineWaveShape

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(
            circleLineWidth: 1.0,
            strokeColor: .constant(Color.blue),
            color1: .constant(Color(#colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1)).opacity(0.7)),
            color2: .constant(Color(#colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1)).opacity(0.9)),
            color3: .constant(Color(#colorLiteral(red: 0.4745098054, green: 0.8392156959, blue: 0.9764705896, alpha: 1))))
            .preferredColorScheme(.dark)
    }
}

struct ContentView: View {
    @State var phase: Double = 0
    let frequency: Double = 5
    let duration: Double = 3
    let  strength: Double = 30
    @State var percent: Double = 0.3
    @State var circleLineWidth: CGFloat
    @Binding var strokeColor: Color
    @Binding var color1: Color
    @Binding var color2: Color
    @Binding var color3: Color
    
    var body: some View {
        VStack {
            Circle()
                .stroke(strokeColor, lineWidth: circleLineWidth)
                .background(
                    ZStack {
                        Color(.systemPink)
                        SineWaveShape(percent: percent, strength: strength * 0.9, frequency: frequency + 2, phase: self.phase)
                            .fill(color1)
                            .offset(y: CGFloat(1) * 1)
                            .animation(
                                Animation.linear(duration: duration).repeatForever(autoreverses: false)
                            )
                            .mask(
                                LinearGradient(gradient: Gradient(colors: [color1.opacity(0.7), color1]), startPoint: .top, endPoint: .bottom)
                            )
                        
                        SineWaveShape(percent: percent, strength: strength * 0.8, frequency: frequency + 1, phase: self.phase)
                            .fill(color2)
                            .offset(y: CGFloat(2) * 1)
                            .animation(
                                Animation.linear(duration: duration).repeatForever(autoreverses: false)
                            )
                            .mask(
                                LinearGradient(gradient: Gradient(colors: [color2.opacity(0.7), color2]), startPoint: .top, endPoint: .bottom)
                            )
                        
                        SineWaveShape(percent: percent, strength: strength * 0.7, frequency: frequency, phase: self.phase)
                            .fill(color3)
                            .offset(y: CGFloat(3) * 1)
                            .animation(
                                Animation.linear(duration: duration).repeatForever(autoreverses: false)
                            )
                            .mask(
                                LinearGradient(gradient: Gradient(colors: [color3.opacity(0.7), color3]), startPoint: .top, endPoint: .bottom)
                            )
                    }
                    .clipShape(Circle())
                    .onAppear(perform: {
                        phase = .pi * 2
                    })
            )
            Slider(value: $percent, in: 0...1, minimumValueLabel: Text("0"), maximumValueLabel: Text("1")) {
                
            }
        }
    }
}