SwiftUIで大阪万博のいのちの輝き君を作成してみました。
※ 色はシステムカラーを使用しているため、本来の色とは異なります。
1. 赤い背景を作成
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)
}
}
}
}
2. 白い目を作成
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)
}
}
3.青い目を作成
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)
}
}
完成！！
## 参考