[SwiftUI] Create Neon Style

[SwiftUI] Create Neon Style

Updated
Oct 7, 2019 8:13 PM
Created
Oct 7, 2019 8:01 PM
Tags
SwiftUI.frameworkMemo
Keywords
image
Text("Hello!")
  .foregroundColor(Color(hex: 0x2a8ffa))
  .font(Font.system(size: 20, weight: .bold))
  .modifier(NeonStyleModifier(color: .init(hex: 0xfc6a26)))


extension Color {
  init(hex: Int, opacity: Double = 1.0) {
    let red = Double((hex & 0xff0000) >> 16) / 255.0
    let green = Double((hex & 0xff00) >> 8) / 255.0
    let blue = Double((hex & 0xff) >> 0) / 255.0
    self.init(.sRGB, red: red, green: green, blue: blue, opacity: opacity)
  }
}

struct NeonStyleModifier: ViewModifier {
  
  let color: Color
  
  func body(content: Content) -> some View {
    
    let blurRadius: CGFloat = 10
    
    return ZStack {
      content
      content
        .blur(radius: blurRadius)
    }
    .padding(10)
    .overlay(
      RoundedRectangle(cornerRadius: 16, style: .continuous)
        .stroke(color, lineWidth: 3)
    )
      .background(
        RoundedRectangle(cornerRadius: 16, style: .continuous)
          .stroke(color, lineWidth: 3)
          .brightness(0.1)
          .blur(radius: blurRadius)
    )
      .background(
        RoundedRectangle(cornerRadius: 16, style: .continuous)
          .stroke(color, lineWidth: 3)
          .brightness(0.1)
          .blur(radius: blurRadius)
          .opacity(0.2)
    )
      .compositingGroup()

  }
  
}

image

Other Notes

Notes