Skip to content

Instantly share code, notes, and snippets.

@chriseidhof
Created July 11, 2022 17:21
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chriseidhof/23275045aa323a02b13349ba1830ce3f to your computer and use it in GitHub Desktop.
Save chriseidhof/23275045aa323a02b13349ba1830ce3f to your computer and use it in GitHub Desktop.
import SwiftUI
struct Light: View {
var body: some View {
Circle()
.overlay(rings)
.overlay(
Circle()
.fill(gradient)
.alignmentGuide(VerticalAlignment.center, computeValue: { $0.height/10 })
.opacity(0.3)
)
.padding(5)
.background {
Circle()
.fill(Color.black)
.overlay(Circle().fill(bezelGradient))
}
}
var bezelGradient: LinearGradient {
LinearGradient(
stops: [
.init(
color: .black,
location: -0
),
.init(
color: .init(CGColor(
red: 0.4082111120223999,
green: 0.4483206868171692,
blue: 0.48617857694625854,
alpha: 1.0000
)),
location: 0.5
),
.init(
color: .clear,
location: 0.51
)
],
startPoint: .top,
endPoint: .bottom
)
}
var rings: some View {
GeometryReader { proxy in
let steps = 10
let padding = proxy.size.width/(2 * .init(steps))
ZStack {
ForEach(0..<10) { x in
Circle()
.strokeBorder(lineWidth: 2)
.foregroundColor(.black.opacity(0.04))
.blendMode(.darken)
.padding(padding * .init(x))
}
}
}
}
var gradient: EllipticalGradient {
EllipticalGradient(
colors: [.white, .white.opacity(0)],
center: .top
)
}
}
struct Item: Identifiable {
var id = UUID()
var color: Color
var symbol: String
}
let items: [Item] = [
.init(color: .red, symbol: "xmark"),
.init(color: .yellow, symbol: "minus"),
.init(color: .green, symbol: "arrow.up.left.and.arrow.down.right"),
]
struct ContentView: View {
@State var hover = false
var body: some View {
HStack(spacing: 30) {
ForEach(items) { item in
Light()
.foregroundColor(item.color)
.overlay {
if hover {
Image(systemName: item.symbol)
.font(.largeTitle.bold())
.foregroundColor(Color.black.opacity(0.5))
}
}
.frame(width: 100, height: 100)
.animation(.default.speed(2), value: hover)
}
}
.contentShape(Rectangle())
.onHover(perform: {
hover = $0
})
.padding(30)
.background {
let rect = RoundedRectangle(cornerRadius: 10, style: .continuous)
ZStack {
rect
.fill(Color.init(white: 0.15))
rect
.strokeBorder(Color.black, lineWidth: 5)
}
}
.padding(50)
.padding([.trailing, .bottom], 200)
.background {
ZStack {
RoundedRectangle(cornerRadius: 10, style: .continuous)
.fill(Color.white)
RoundedRectangle(cornerRadius: 10, style: .continuous)
.strokeBorder(Color.black.opacity(0.3), lineWidth: 1)
}
}
.padding(50)
.background {
Color.init(white: 0.8)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment