Olympic Games 2024

ContentView.swift

//
//  ContentView.swift
//  olympics
//
//  Created by Ming on 27/7/2024.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            VStack {
                HStack(spacing: 15) {
                    Circle().stroke(Color.blue, lineWidth: 10).frame(width: 100, height: 100)
                    Circle().stroke(Color.black, lineWidth: 10).frame(width: 100, height: 100)
                    Circle().stroke(Color.red, lineWidth: 10).frame(width: 100, height: 100)
                }
                HStack(spacing: 15) {
                    Circle().stroke(Color.yellow, lineWidth: 10).frame(width: 100, height: 100)
                    Circle().stroke(Color.green, lineWidth: 10).frame(width: 100, height: 100)
                }
                .offset(y: -50)
            }
            VStack {
                Text("🇫🇷")
                Text("Paris 2024")
                    .bold()
                    .foregroundColor(.clear)
                    .background(
                        LinearGradient(gradient: Gradient(colors: [Color.blue, Color.gray, Color.red]), startPoint: .leading, endPoint: .trailing)
                            .mask(Text("Paris 2024").bold())
                    )
            }.font(.largeTitle)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

I replied this using olympic rings .svg (export with pdf on figma)

//https://arts.swiftuigallery.com/work/3d42a7b0-9c5d-4aaf-8579-296fdb1031d7
import SwiftUI

struct OlimpicParis2024: View {
    
    private var parisFlagGradient: LinearGradient {
        let stops = [
            Gradient.Stop(color: Color.blue, location: 0.0),
            Gradient.Stop(color: Color.blue, location: 0.33),
            Gradient.Stop(color: Color.white, location: 0.33),
            Gradient.Stop(color: Color.white, location: 0.66),
            Gradient.Stop(color: Color.red, location: 0.66),
            Gradient.Stop(color: Color.red, location: 1.0)
        ]
        return LinearGradient(
            gradient: Gradient(stops: stops),
            startPoint: .leading,
            endPoint: .trailing
        )
    
    }
    
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "laurel.leading")
                    .font(.system(size: 100))
                    .foregroundStyle(.green.mix(with: .black, by: 0.3).gradient)
                
                Image("Olympic_Rings")
                    .resizable()
                    .scaledToFit()
                
                Image(systemName: "laurel.trailing")
                    .font(.system(size: 100))
                    .foregroundStyle(.green.mix(with: .black, by: 0.3).gradient)

            }
            
            Text("Paris 2024")
                .font(.largeTitle).bold().fontDesign(.rounded)
                .foregroundStyle(parisFlagGradient)
                .kerning(2.0)
                .stroke(color: .secondary, width: 0.5)
            
        }
    }
}

#Preview {
   OlimpicParis2024()
}