CombinePathView

class CombinedPathView: UIView {
    
    private(set) var cornerBubbleWidth: CGFloat = 16
    
    init(frame: CGRect, radius: CGFloat = 16) {
        super.init(frame: frame)
        backgroundColor = .clear
        self.cornerBubbleWidth = radius
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        let path1 = UIBezierPath(
            roundedRect: CGRect(
                x: 0, y: 0,
                width: frame.width,
                height: frame.height - cornerBubbleWidth
            ),
            byRoundingCorners: [.topLeft, .topRight, .bottomLeft],
            cornerRadii: CGSize(width: cornerBubbleWidth, height: cornerBubbleWidth))
        
        let path2 = UIBezierPath()
        path2.move(
            to: CGPoint(
                x: frame.width - (cornerBubbleWidth * 2),
                y: frame.height - cornerBubbleWidth
            )
        )
        
        path2.addQuadCurve(
            to: CGPoint(x: frame.width - (cornerBubbleWidth), y: frame.height),
            controlPoint: CGPoint(
                x: frame.width - cornerBubbleWidth,
                y: frame.height - cornerBubbleWidth
            )
        )
        
        path2.addQuadCurve(
            to: CGPoint(x: frame.width, y: frame.height - cornerBubbleWidth),
            controlPoint: CGPoint(
                x: frame.width,
                y: frame.height
            )
        )
        
        // Create a new path by combining the two paths
        let combinedPath = UIBezierPath()
        combinedPath.append(path1)
        combinedPath.append(path2)
        
        // Create a shape layer
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = combinedPath.cgPath
        
        // Create a gradient layer
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [
            UIColor(hexString: "#e85962").cgColor,
            UIColor(hexString: "#f48589").cgColor
        ]
        gradientLayer.startPoint = CGPoint(x: 0.25, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.5)

        
        // Set the frame of the gradient layer to match the bounds of the view
        gradientLayer.frame = bounds
        
        // Mask the gradient layer with the shape layer
        gradientLayer.mask = shapeLayer
        
        // Add the gradient layer to the view's layer
        layer.addSublayer(gradientLayer)
    }
}

let combinedPathView = CombinedPathView(frame: CGRect(x: 0, y: 0, width: 58 * 5, height: 22 * 5), radius: 12)

PlaygroundPage.current.liveView = combinedPathView