How to create WedgePerimeter shape in SwiftUI

Question

Not being what that geometric shape is called, I am trying to recreate it in a Shape, but I can't make one side smaller than the other

struct WedgePerimeter: Shape {
    var startAngle: Angle
    var endAngle: Angle
    var lineMaxWidth: CGFloat
    var lineMinWidth: CGFloat
    
    var animatableData: AnimatablePair<AnimatablePair<Double, Double>, AnimatablePair<Double, Double>> {
        get {
            AnimatablePair(
                AnimatablePair(startAngle.radians, endAngle.radians),
                AnimatablePair(Double(lineMaxWidth), Double(lineMinWidth))
            )
        }
        set {
            startAngle = Angle(radians: newValue.first.first)
            endAngle = Angle(radians: newValue.first.second)
            lineMaxWidth = CGFloat(newValue.second.first)
            lineMinWidth = CGFloat(newValue.second.second)
        }
    }

    func path(in rect: CGRect) -> Path {
        var path = Path()

        let center = CGPoint(x: rect.midX, y: rect.midY)
        let radius = min(rect.width, rect.height) / 2

        // Outer Arc
        path.addArc(center: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)
        
        // Line to the inner radius at endAngle
        path.addLine(to: CGPoint(x: center.x + (radius - 0) * CGFloat(cos(endAngle.radians)),
                                 y: center.y + (radius - 0) * CGFloat(sin(endAngle.radians))))
        
        // Inner Arc
        path.addArc(center: center, radius: radius - lineMinWidth, startAngle: endAngle, endAngle: startAngle, clockwise: true)
        
        // Line to the outer radius at startAngle
        path.addLine(to: CGPoint(x: center.x + radius * CGFloat(cos(startAngle.radians)),
                                 y: center.y + radius * CGFloat(sin(startAngle.radians))))
        
        //path.closeSubpath()
        
        return path
    }
}

Answer 1

It looks like the shape is based on a circle, but with the linewidth dependent on the position along the path. In other words, the linewidth is tapered.

Based on this premise, the basic shape can be drawn by progressively trimming a circle, then drawing a dot at the end of the path.

• The size of each dot will depend on the trim fraction.
• The number of dots will depend on the size. I went for 10 times the maximum frame dimension. This should mean the distance between points is less than a pixel, even on screens with the highest resolution.

private func taperedPath(trimAt: Double, maxLineWidth: CGFloat) -> some View {
    GeometryReader { proxy in
        let rect = CGRect(origin: .zero, size: proxy.size)
        let path = Circle().path(in: rect)
        let nSteps = Int(max(proxy.size.width, proxy.size.height)) * 10
        ForEach(0..<nSteps, id: \.self) { i in
            let fraction = Double(i) / Double(nSteps)
            let trimFraction = fraction * trimAt
            let dotSize = (1 - fraction) * maxLineWidth
            if dotSize > 0, let position = path.trimmedPath(from: 0, to: trimFraction).currentPoint {
                Circle()
                    .frame(width: dotSize, height: dotSize)
                    .position(position)
            }
        }
    }
}

This gives the following form:

This can now be used as a .mask for a circle that is stroked in the regular way. You might like to use a gradient for this. Finally, a .rotationEffect can be applied to the result, so that the start and end points are equally spaced around a vertical line through the center:

var body: some View {
    Circle()
        .trim(from: 0, to: 0.8)
        .stroke(style: .init(lineWidth: 30, lineCap: .butt))
        .foregroundStyle(
            AngularGradient(colors: [.red, .orange, .yellow], center: .center)
        )
        .mask {
            taperedPath(trimAt: 0.8, maxLineWidth: 30)
        }
        .frame(width: 300, height: 300)
        .rotationEffect(.degrees(126))
}

If you wanted to animate this, you could animate the trim fraction before stroking:

@State private var progressFraction = 0.0

Circle()
    .trim(from: 0, to: 0.8 * progressFraction)
    // ...other modifiers as before
    .onAppear {
        withAnimation(.linear(duration: 5).repeatForever()) {
            progressFraction = 1.0
        }
    }