How can I create circles with different colours + sizes around a text in swiftUi?

Question

I am trying to create 6 circles with different colours and sizes around a text, as a template see the inserted image.

I had tried to do it with random values, but that did not work.

The colours I used are: yellow, red, blue, orange, turquoise and purple.

I have created a text that says "Welcome to ....".

Answer 1

First, make a struct to model each circle, storing each circle's size, position, and color.

struct RandomCircle: Identifiable {
    let id = UUID()
    let size: CGFloat
    let position: CGPoint
    let color: Color
    
    static func new() -> RandomCircle {
        RandomCircle(
            size: CGFloat.random(in: 50...100), // feel free to adjust this range
            // this is a position in the unit square
            // we will scale it to the full available space later on
            position: CGPoint(
                x: CGFloat.random(in: 0...1),
                y: CGFloat.random(in: 0...1)
            ),
            // I only randomise the hue here, but you can do anything you like
            color: Color(hue: Double.random(in: 0...1), saturation: 0.5, brightness: 1)
        )
    }
}

Then your view can be like this:

@State var circles: [RandomCircle] = [
    .new(),
    .new(),
    .new(),
    .new(),
    .new(),
    .new(),
]

var body: some View {
    ZStack {
        GeometryReader { geo in
            ForEach(circles) { circle in
                Circle()
                    .fill(circle.color)
                     // scale the position according to the size from the geometry reader
                    .position(circle.position.applying(.init(scaleX: geo.size.width, y: geo.size.height)))
                    .frame(width: circle.size)
            }
        }
        
        // put the text last so it doesn't get covered by the circles
        Text("Welcome ...")
    }
}

Answer 2

I would suggest using a ZStack to display everything. The circles can just have a random size, angle and distance from the middle.

Like this:

struct ContentView: View {
    let colors: [Color] = [.yellow, .red, .blue, .orange, .teal, .purple]

    private func circle(index: Int) -> some View {
        let size = CGFloat.random(in: 50...100)
        let distance = CGFloat.random(in: 50...100) + (size / 2)
        let segmentAngle = 360 / CGFloat(colors.count)
        let angle = ((CGFloat(index) + 0.5) * segmentAngle) + CGFloat.random(in: -15...15)
        return Circle()
            .frame(width: size, height: size)
            .offset(x: distance)
            .rotationEffect(.degrees(angle))
    }

    var body: some View {
        ZStack {
            ForEach(Array(colors.enumerated()), id: \.offset) { index, color in
                circle(index: index)
                    .foregroundColor(color)
            }
            Text("Welcome to ....")
                .font(.largeTitle)
                .bold()
                .foregroundColor(.gray)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}