SwiftUIでいのちを輝かせる

SwiftUIで大阪万博のいのちの輝き君を作成してみました。

※ 色はシステムカラーを使用しているため、本来の色とは異なります。

# 1. 赤い背景を作成
```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                inochiRed.frame(width: geometry.size.width,
                                height: geometry.size.width,
                                alignment: .center)
            }
        }
    }
    
    var inochiRed: some View {
        GeometryReader { geometry in
            Group {
                Ellipse()
                    .fill(Color.red)
                    .frame(width: geometry.size.width * 0.21,
                           height: geometry.size.height * 0.21,
                           alignment: .center)
                    .position(x: geometry.size.width * 0.43,
                              y: geometry.size.width * 0.124)
                Ellipse()
                    .fill(Color.red)
                    .frame(width: geometry.size.width * 0.20,
                           height: geometry.size.height * 0.20,
                           alignment: .center)
                    .position(x: geometry.size.width * 0.296,
                              y: geometry.size.width * 0.231)
                Ellipse()
                    .fill(Color.red)
                    .frame(width: geometry.size.width * 0.20,
                           height: geometry.size.height * 0.20,
                           alignment: .center)
                    .position(x: geometry.size.width * 0.135,
                              y: geometry.size.width * 0.328)
                Ellipse()
                    .fill(Color.red)
                    .frame(width: geometry.size.width * 0.19,
                           height: geometry.size.height * 0.19,
                           alignment: .center)
                    .position(x: geometry.size.width * 0.273,
                              y: geometry.size.width * 0.390)
                Ellipse()
                    .fill(Color.red)
                    .frame(width: geometry.size.width * 0.25,
                           height: geometry.size.height * 0.25,
                           alignment: .center)
                    .position(x: geometry.size.width * 0.169,
                              y: geometry.size.width * 0.529)
            }
            Group {
                Ellipse()
                    .fill(Color.red)
                    .frame(width: geometry.size.width * 0.12,
                           height: geometry.size.height * 0.22,
                           alignment: .center)
                    .position(x: geometry.size.width * 0.255,
                              y: geometry.size.width * 0.685)
                Ellipse()
                    .fill(Color.red)
                    .frame(width: geometry.size.width * 0.18,
                           height: geometry.size.height * 0.18,
                           alignment: .center)
                    .position(x: geometry.size.width * 0.347,
                              y: geometry.size.width * 0.819)
                Ellipse()
                    .fill(Color.red)
                    .frame(width: geometry.size.width * 0.27,
                           height: geometry.size.height * 0.27,
                           alignment: .center)
                    .position(x: geometry.size.width * 0.535,
                              y: geometry.size.width * 0.849)
                Ellipse()
                    .fill(Color.red)
                    .frame(width: geometry.size.width * 0.30,
                           height: geometry.size.height * 0.25,
                           alignment: .center)
                    .position(x: geometry.size.width * 0.714,
                              y: geometry.size.width * 0.695)
                Ellipse()
                    .fill(Color.red)
                    .frame(width: geometry.size.width * 0.19,
                           height: geometry.size.height * 0.30,
                           alignment: .center)
                    .position(x: geometry.size.width * 0.729,
                              y: geometry.size.width * 0.477)
                Ellipse()
                    .fill(Color.red)
                    .frame(width: geometry.size.width * 0.30,
                           height: geometry.size.height * 0.15,
                           alignment: .center)
                    .position(x: geometry.size.width * 0.753,
                              y: geometry.size.width * 0.327)
                Ellipse()
                    .fill(Color.red)
                    .frame(width: geometry.size.width * 0.28,
                           height: geometry.size.height * 0.28,
                           alignment: .center)
                    .position(x: geometry.size.width * 0.653,
                              y: geometry.size.width * 0.165)
            }
        }
    }
}
```

![Simulator Screen Shot - iPhone 11 - 2020-08-29 at 16.28.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/470777/90faecab-ab76-7487-494b-89c124d3424c.png)

# 2. 白い目を作成
```swift 
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                inochiRed.frame(width: geometry.size.width,
                                height: geometry.size.width,
                                alignment: .center)
                inochiWhite.frame(width: geometry.size.width,
                                height: geometry.size.width,
                                alignment: .center)
            }
        }
    }

    var inochiWhite: some View {
        GeometryReader { geometry in
            Ellipse()
                .fill(Color.white)
                .frame(width: geometry.size.width * 0.09,
                       height: geometry.size.height * 0.09,
                       alignment: .center)
                .position(x: geometry.size.width * 0.105,
                          y: geometry.size.width * 0.310)
            Ellipse()
                .fill(Color.white)
                .frame(width: geometry.size.width * 0.10,
                       height: geometry.size.height * 0.10,
                       alignment: .center
                .position(x: geometry.size.width * 0.197,
                          y: geometry.size.width * 0.551)
            Ellipse()
                .fill(Color.white)
                .frame(width: geometry.size.width * 0.085,
                       height: geometry.size.height * 0.085,
                       alignment: .center)
                .position(x: geometry.size.width * 0.520,
                          y: geometry.size.width * 0.900)
            Ellipse()
                .fill(Color.white)
                .frame(width: geometry.size.width * 0.135,
                       height: geometry.size.height * 0.120,
                       alignment: .center)
                .position(x: geometry.size.width * 0.773,
                          y: geometry.size.width * 0.713)
            Ellipse()
                .fill(Color.white)
                .frame(width: geometry.size.width * 0.11,
                       height: geometry.size.height * 0.11,
                       alignment: .center)
                .position(x: geometry.size.width * 0.685,
                          y: geometry.size.width * 0.105)
        }
    }
```

![Simulator Screen Shot - iPhone 11 - 2020-08-29 at 16.30.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/470777/fb1e7e50-24e1-0dab-b1e4-32493d12e5fe.png)

# 3.青い目を作成

```swift
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                inochiRed.frame(width: geometry.size.width,
                                height: geometry.size.width,
                                alignment: .center)
                inochiWhite.frame(width: geometry.size.width,
                                height: geometry.size.width,
                                alignment: .center)
                inochiBlue.frame(width: geometry.size.width,
                                height: geometry.size.width,
                                alignment: .center)
            }
        }
    }

    var inochiBlue: some View {
        GeometryReader { geometry in
            Ellipse()
                .fill(Color.blue)
                .frame(width: geometry.size.width * 0.045,
                       height: geometry.size.height * 0.045,
                       alignment: .center)
                .position(x: geometry.size.width * 0.085,
                          y: geometry.size.width * 0.30)
            Ellipse()
                .fill(Color.blue)
                .frame(width: geometry.size.width * 0.045,
                       height: geometry.size.height * 0.045,
                       alignment: .center)
                .position(x: geometry.size.width * 0.193,
                          y: geometry.size.width * 0.522)
            Ellipse()
                .fill(Color.blue)
                .frame(width: geometry.size.width * 0.040,
                       height: geometry.size.height * 0.040,
                       alignment: .center)
                .position(x: geometry.size.width * 0.520,
                          y: geometry.size.width * 0.923)
            Ellipse()
                .fill(Color.blue)
                .frame(width: geometry.size.width * 0.050,
                       height: geometry.size.height * 0.050,
                       alignment: .center)
                .position(x: geometry.size.width * 0.812,
                          y: geometry.size.width * 0.700)
            Ellipse()
                .fill(Color.blue)
                .frame(width: geometry.size.width * 0.050,
                       height: geometry.size.height * 0.050,
                       alignment: .center)
                .position(x: geometry.size.width * 0.705,
                          y: geometry.size.width * 0.080)
        }
    }
```

### 完成！！　
![Simulator Screen Shot - iPhone 11 - 2020-08-29 at 16.36.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/470777/8613c40d-2bdb-1400-1103-57abb29915fd.png)

##　参考

- https://qiita.com/50m_regent/items/725ea995abe0c59e57dc
- https://qiita.com/Takayoshi_Makabe/items/07e4553362fc14d7ddb1