ios – Easy methods to create round textual content in SwiftUI that goes from a flat line to an ideal circle primarily based on diploma modifications?

I am making an attempt to create a round textual content view in SwiftUI the place the textual content begins as a flat line and, as I modify the arc diploma utilizing a slider, it progressively varieties an ideal circle when the diploma reaches 360. Here is what I’ve to date:

import SwiftUI

struct CirculerTextView: View {
    @State personal var arcDegrees: Double = 0
    let textual content: String = "Glad Mornings"
    
    var physique: some View {
        VStack(spacing: 40) {
            GeometryReader { geometry in
                CirculerText(textual content: textual content, arcDegrees: arcDegrees, dimension: geometry.dimension)
                    .body(top: 200)
            }
            .body(top: 200)
            .border(Colour.grey.opacity(0.3))
            
            VStack {
                Slider(worth: $arcDegrees, in: 0...360, step: 1)
                    .padding(.horizontal)
                Textual content("Arc Levels: (Int(arcDegrees))")
                    .font(.subheadline)
            }
        }
        .padding()
    }
}

struct CirculerText: View {
    let textual content: String
    let arcDegrees: Double
    let dimension: CGSize
    
    var physique: some View {
        let letters = Array(textual content)
        let letterCount = letters.rely
        let chordLength = dimension.width * 0.5
        let spacing = letterCount > 1 ? chordLength / CGFloat(letterCount - 1) : 0
        let startX = (dimension.width - chordLength) / 2
        let centerY = dimension.top / 2
        let centerX = dimension.width / 2
        
        let totalArcRad = arcDegrees * .pi / 360
        let safeArcRad = max(abs(totalArcRad), 0.0001)
        let radius = chordLength / (2 * CGFloat(sin(safeArcRad / 2)))
        let circleCenter = CGPoint(x: centerX, y: centerY)
        
        return ZStack {
            ForEach(0.. Double {
        return radians * 360 / .pi
    }
}

struct CirculerTextView_Previews: PreviewProvider {
    static var previews: some View {
        CirculerTextView()
    }
}

The thought is that as I transfer the slider, the textual content ought to progressively transition from a flat line to a full circle because the arcDegrees worth will increase from 0 to 360. Proper now, it really works for making a round association of textual content, however I am struggling to get it to transition easily, particularly when the levels are smaller (lower than 360), the place the textual content nonetheless seems straight.

How can I modify the code in order that:

The textual content easily transitions from a flat line to a round arc.
When the diploma reaches 360, the textual content completely varieties a circle.
Any assist can be significantly appreciated!

what I’m making an attempt to attain

what I get consequence proper now