iOS SwiftUI: Top trailing gradient triangle


I’m trying to create a top trailing triangle filled with a gradient color (pink and yellow) to look exactly like this prototype:

enter image description here

What I already did is this shape:

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        path.move(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))

        return path
    }
}

and I just drop it in the content view like this:

GeometryReader { geometry in
                   Triangle()
                .fill( LinearGradient(gradient: Gradient(colors: [Color.yellow.opacity(0.5), Color.pink.opacity(0.5)]),
                                        startPoint: .topTrailing,
                                        endPoint: .bottomLeading
                                    )
                                    
                                )
                       .frame(width: geometry.size.width * 1.65, height: 210)
                       .position(x: geometry.size.width, y: 105)
               }
               .edgesIgnoringSafeArea(.all)

but the result is this:

enter image description here

Any suggestions to achieve a similar prototype is appreciated.

EDIT:
adding .blur(radius: 100) after the .fill modifier will achieve a very close result.

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img