Demo showing the use of polar layout guides to create star detail shapes in Captain America's shield

LayoutGuideShieldDemo.swift

//
//  CaptainAmericaShieldDemo.swift
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
//  of the Software, and to permit persons to whom the Software is furnished to do so,
//  subject to the following conditions:
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
//  INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
//  PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
//  COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
//  AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
//  WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
//
//  Created by Adam Fordyce on 31/01/2020.
//  Copyright © 2020 Adam Fordyce. All rights reserved.
//

import PureSwiftUI

private let colorShieldSilver: Color = .rgb(0.846, 0.883, 0.931)
private let colorShieldBlue: Color = .rgb(0.088, 0.300, 0.617)
private let colorShieldRed: Color = .rgb(0.895, 0.089, 0.110)
private let colorDark = Color(white: 0.5)
private let halfHighlightRadialWidth: Double = 0.1

private let conicHighlights: AngularGradient = {
    var stops: [GradientStopComponents] = []
    for index in 0...4 {
        let offset = (index.asDouble * 0.25)
        stops.append((colorDark, offset - halfHighlightRadialWidth))
        stops.append((.white, offset))
        stops.append((colorDark, offset + halfHighlightRadialWidth))
    }
    return AngularGradient(stops, angle: .top)
}()

private let size: CGFloat = 400
private let rect = CGSize.square(size).asCGRect
private let innerRect = CGRect(rect.center, .square(size * 0.5), anchor: .center)

struct CaptainAmericaShieldDemo: View {
    
    @State private var rotating = false
    
    var body: some View {

        return ZStack {
            Circle()
                .fillColor(colorShieldSilver)
            Path { path in
                let ringStep = 1 / 6.asCGFloat
                for ring in 0...3 {
                    let scale = 1 - ringStep * ring.asCGFloat
                    path.circle(rect.center, diameter: rect.widthScaled(scale))
                }
            }
            .eoFillColor(colorShieldRed)
            Circle()
                .fillColor(colorShieldBlue)
                .frame(size / 2)
            
            Group {
                Path { path in
                    let layout = LayoutGuide.polar(innerRect, rings: 1, segments: 5, origin: .center)
                    path.move(layout[1, 0])
                    for segment in 1...4 {
                        path.line(layout[1, segment * 2])
                    }
                }
                .fillColor(colorShieldSilver)
                
                Path { path in
                    let layout = LayoutGuide.polar(innerRect, rings: [0.34, 0.9], segments: 10, origin: .center)
                    path.move(layout[1, 0])
                    for segment in 1...10 {
                        let point = layout[segment.isEven ? 1 : 0, segment]
                        path.line(point)
                        if segment.isOdd {
                            path.line(from: innerRect.center, to: point)
                        }
                    }
                }
                .strokeColor(.white(0.98), lineWidth: 0.5)
            }
            .rotateIf(self.rotating, 360.degrees)
            
            Path { path in
                let numCircles = 100
                let step = 1 / numCircles.asCGFloat
                for index in 1...numCircles {
                    path.ellipse(rect.center, rect.sizeScaled(step * index.asCGFloat + 0.02.random().asCGFloat), anchor: .center)
                }
            }
            .stroke(colorDark, lineWidth: 0.06)
            .blur(0.3)
            .clipCircle()
            .blendMode(.multiply)
            
            Circle()
                .fill(conicHighlights)
                .blur(4)
                .overlay(Circle().fillColor(.white).frame(15).blur(6))
                .rotate(10.degrees)
                .drawingGroup()
                .blendMode(.multiply)
        }
        .clipCircle()
        .frame(size)
        .onAppear {
            withAnimation(Animation.linear(duration: 20).repeatForever(autoreverses: false)) {
                self.rotating = true
            }
        }
    }
}

struct GridLayoutMarvelSheldDemo_Previews: PreviewProvider {
    struct GridLayoutMarvelSheldDemo_Harness: View {
        
        var body: some View {
            CaptainAmericaShieldDemo().padding(50).previewSizeThatFits()
        }
    }
    
    static var previews: some View {
        GridLayoutMarvelSheldDemo_Harness()
    }
}