Metal-based implementation of bezier curve that you fill with gradient along path and animate

by iOS Example

AnimatableBezierPath

Metal-based implementation of bezier curve that you fill with gradient along path and animate.

Here how it looks.

How to generate mesh

It is as simple as native UIKit API. Ideally you should ask your designer to create SVG file with single continuous bezier curve, export it and convert it with online converter like this one or manually. You can find “Hello” example here.

Here how it looks like:

public var helloBezierPath: BezierPath = {
    // Initiate bezier path with `viewBox` and desired `lineWidth`
    var shape = BezierPath(viewBox: .init(width: 1032, height: 322), lineWidth: 120)
    
    // Start your curve via moving to initial position
    shape.move(to: CGPoint(x: 1, y: 303.38))
    
    // And then you should draw it relatively to your `viewBox`
    shape.addCurve(to: CGPoint(x: 109.8, y: 227.73), controlPoint1: CGPoint(x: 28.31, y: 287.4), controlPoint2: CGPoint(x: 88.3, y: 249.9))
    shape.addCurve(to: CGPoint(x: 210.23, y: 48.3), controlPoint1: CGPoint(x: 164.86, y: 164.55), controlPoint2: CGPoint(x: 202.46, y: 117.58))
    
    return shape
}()

And to draw it you need to use provided AnimatableBezierView

struct HelloView: View {
    
    @State var animationPercent: Float = 0
    
    var body: some View {
        AnimatableBezierView(path: helloBezierPath, colors: helloColors, animationPercent: animationPercent)
            .onAppear {
                withAnimation(.easeInOut(duration: 3)) {
                    animationPercent = 1
                }
            }
    }
    
}

Add via SwiftPM

dependencies: [
    .package(url: "https://github.com/Nekitosss/AnimatableBezierPath", from: "1.0.0"),
],

GitHub

View Github