SwiftUI ScaleEffect Animation Issue

Question

I'm doing currently an animated pulsing play button with swiftUI. Everything works, but the animation starts in from the upper left corner somehow Here is a screenshot. Example 1

But the filled Circle() should be behind the play.fill icon and the stroke should just pulse of it The code I used to make it is this one

import SwiftUI

struct PlayView: View {
    @State private var pulsate = false
    @State private var showWaves = false
    var body: some View {
        ZStack{
            
            Circle()
                .stroke(lineWidth: 2)
                .frame(width: 100, height: 100)
                .foregroundColor(.red)
                .scaleEffect(showWaves ? 2 : 1)
                .hueRotation(.degrees(showWaves ? 360 : 0))
                .opacity(showWaves ? 0 : 1)
                .animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: false).speed(1))
                .onAppear(){
                    self.showWaves.toggle()
                }
            Circle()
                .frame(width: 100, height: 100)
                .foregroundColor(.red)
                .scaleEffect(pulsate ? 1 : 1.2)
                .animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true).speed(1))
                .onAppear(){
                    self.pulsate.toggle()
                }
            Image(systemName: "play.fill")
                .font(.largeTitle)
                .foregroundColor(.white)
        }.shadow(radius: 25)
        
    }
}