Vector Animation Foundations: Path Class, Bézier Curves, and Rational Bézier Geometry

Background With the rapid development of internet video services, users demand higher‑quality interactive and special‑effect animations in mobile apps. Traditional frame‑based animations, which store each frame as an independent image, are simple to implement but consume large resources and require multiple resolution assets for different screen sizes. Vector animation solves these problems by describing graphics through drawing commands, allowing compact storage and resolution‑independent rendering with anti‑aliasing.

Existing vector animation libraries such as Lottie, SVGA, and PAG do not fully meet Bilibili’s specific needs. Bilibili’s self‑developed rendering engine Chronos already powers video playback, bullet‑screen effects, and UI components. Building a vector‑animation module on top of Chronos can address the remaining animation pain points.

From a Paintbrush to a Path

Imagine a kindergarten drawing lesson: to draw a tree we move the brush to a position, draw a circle for the canopy, then a rectangle for the trunk, and finally color each part. Vector graphics follow the same idea: a series of straight lines and curves describe the outline, and a fill rule colors the interior. GPUs, however, only understand points, lines, and triangles, so we must convert curves into line segments (poly‑lines) and then triangulate them.

Key steps in the conversion pipeline:

Curve flattening (poly‑line conversion)

Triangulation of the resulting polygon

The flattening process hinges on the ability to approximate a curve by a series of short line segments, which is achieved by curve subdivision (e.g., De Casteljau’s algorithm).

Path Class – Core Data Structures

The Path class encapsulates the drawing commands needed to describe a vector shape. Its main members are:

draw_verbs_ : vector<DrawVerb> – an array of drawing actions (MoveTo, LineTo, QuadTo, CubicTo, ConicTo).

draw_points_ : vector<glm::vec2> – the list of control points associated with the actions.

conic_weights_ : vector<float> – weights for rational Bézier (Conic) segments.

The class also stores a fill rule to decide which points lie inside the shape. Two common rules are:

Even‑odd rule : Cast a ray from a point; if it crosses an odd number of edges, the point is inside.

Non‑zero winding rule : Sum the signed crossings; a non‑zero sum indicates an interior point.

Bezier Curves and Their Properties

Bezier curves are the fundamental building blocks for vector paths. The most common are quadratic (2‑order) and cubic (3‑order) Bézier curves, expressed via MoveTo , LineTo , QuadTo , and CubicTo . Rational Bézier curves (ConicTo) add a weight to each control point, enabling representation of conic sections (ellipses, parabolas, hyperbolas).

Key properties of Bézier curves:

They pass through the first and last control points.

All basis functions are non‑negative and sum to 1 (convex‑combination property).

The curve lies within the convex hull of its control points.

Affine invariance: applying an affine transform to the control points yields the same transformed curve.

Derivative and curvature properties useful for rendering and animation.

De Casteljau Algorithm

De Casteljau’s algorithm provides a numerically stable way to evaluate Bézier curves at any parameter t . It recursively linearly interpolates between control points, forming a triangular scheme. The algorithm also yields the subdivision points needed for curve flattening.

After n iterations (where n is the curve order), the single point at the top of the triangle is the evaluated point on the curve.

Curve Subdivision

Subdivision splits a Bézier curve into two lower‑order Bézier curves that together reproduce the original segment. The leftmost points of each row form the control polygon of the first sub‑curve, while the rightmost points form the second. This technique is essential for adaptive flattening and for generating anti‑aliased outlines.

Rational Bézier Curves and Conic Sections

Rational Bézier curves introduce a weight w for each control point, allowing the representation of conic sections (ellipse, parabola, hyperbola). A quadratic rational Bézier curve with three control points and weights (1, w, 1) can model any conic segment by adjusting w and the geometry of the control points.

Key properties:

Convex‑hull property still holds.

Projective invariance: applying a projective transform to the weighted control points yields the same transformed curve.

Changing a weight pulls the curve toward or away from the associated control point.

By solving a linear system derived from point‑through and tangent‑through constraints, one can determine the control points and weight that reproduce a desired conic segment.

Rational De Casteljau

The rational version of De Casteljau updates both points and weights at each interpolation step, preserving the rational form. The recursion yields the evaluated point and the subdivided rational Bézier segments.

Weight update:

w_i^{(k)} = (1‑t) * w_i^{(k‑1)} + t * w_{i+1}^{(k‑1)}

Control‑point update:

P_i^{(k)} = ((1‑t) * w_i^{(k‑1)} * P_i^{(k‑1)} + t * w_{i+1}^{(k‑1)} * P_{i+1}^{(k‑1)}) / w_i^{(k)}

Rational Curve Subdivision

Subdivision of rational Bézier curves follows the same pattern as the polynomial case: after performing the rational De Casteljau triangle, the leftmost and rightmost points (with their associated weights) define the two sub‑curves.

Steps:

Compute intermediate weights using the rational weight recurrence.

Compute intermediate control points using the rational point recurrence.

The leftmost set of points/weights yields the first sub‑curve; the rightmost set yields the second.

Conclusion

This article introduced the fundamentals of static vector graphics, focusing on the Path class, Bézier curve mathematics, rational extensions for conic sections, and the algorithms (De Casteljau, subdivision) that enable precise rendering and animation. Upcoming chapters will cover path flattening, triangulation, and the implementation of a full vector‑animation system on top of the Chronos rendering engine.