Shape Elements

Lottie considers everything related to vector data as a "shape" but I think it's worth distinguishing across a few categories:

• Shapes These provide only the shape information, but no styling
• Style These provide styling info (like fill and stroke)
• Group This is a shape that contains other shape
• Modifier These change other shapes
• Transform Special shape that defines the transforms in a group shape

All shapes have the following properties:

Shape Types

Shape

These shapes only define path data, to actually show something, they must be followed by some style shape.

They have a d attribute which specifies the drawing direction, which can be seen when using Trim Path.

Rectangle

A rectangle, defined by its center point and size.

Ellipse

PolyStar

Regular polygon or star.

If sy is 1 (star) you also have attributes defining the inner ends of the star:

Path

Bezier path, note that it's a continuous shape, to have multiple shapes like when you need holes or gaps you need to create multiple Path shapes and group them together.

Style

These apply a style (such as fill stroke) to the paths defined by the shapes.

Each style is applied to all preceding shapes in the same group / layer.

In most formats the style is usually defined as a property of a shape, in lottie they are separate and allows for more flexibility.

Some examples of the added flexibility would be a shape with multiple strokes, or a gradient fading into a solid color.

Fill

Solid fill color.

Stroke

Defines a stroke.

Stroke Dashes

Defined as a sequence of alternating dashes and gaps.

Gradients

Gradient fill and gradient stroke have the same attributes as fill and stroke but remove color (c) and add the following:

If it's a radial gradient, s refers to the center of the gradient, and the style object may have these additional properties:

Basically the radial highlight position is defined in polar coordinates relative to s.

Gradient Colors

Since gradient values might have different representation based on whether they have transparency or not, you need to check p to determine whether a keyframe value has transparency.

Gradient Example

No Style

Represents a style for shapes without fill or stroke.

Group

A group is a shape that can contain other shapes (including other groups).

The usual contents of a group are:

• Shapes
• Style
• Transform

For example, if you want to have a red rectangle with a black outline, its group will contain

1. A Rectangle defining the actual shape of the rectangle
2. A Fill for the color red
3. A Stroke for the black outline
4. A Transform for the group transform

While the contents may vary, a group must always end with a Transform shape.

The attributes of a Group are:

Transform Shape

Basically the same as Transform but with the ty attribute.

Modifiers

Modifiers process their siblings and alter the path defined by shapes.

Repeater

This is a bit different compared from other modifiers, since it will take into account style as well.

The effect of a Repeater is to duplicate the other shapes a number of times applying a transform for each copy.

The transform is multiplied by o + 1 (where o is the Offset property above).
So if o is 0, the first instance shown by the Repeater is at its starting location.
If it's 1, the first instance has the matrix applied to it. Other values multiply the initial transform accordingly.

Repeater Transform

Same as a regular Transform but instead of a single opacity value (o), it has two:

The first copy will use so, the last eo, and copies between them will have an interpolated value.

Trim Path

This is mostly useful for shapes with a stroke and not a fill.

It takes the path defined by shapes and only shows a segment of the resulting bezier data.

s and e go from 0 to 100, 0 being at the beginning of the path and 100 at the end. The displayed segment is what lays between the two.

o is an offset from the start, to allow values to wrap around. Its value goes from 0 (start of the path) to 360 (end of the path). It looks like an angle but it isn't really, the difference between o and s is that with o you can go over 360 or below 0 to shift the whole segment along the path.

Here is an interactive example:

Rounded Corners

Self explanatory

Pucker / Bloat

Interpolates bezier vertices towards the center of the shape, and tangent handles away from it (or vice-versa).

When a is 0, nothing changes.
When a is positive, the vertices are pulled towards the center, with 100 being at the center. And the tangents are pushed away.
When a is negative the vertices are pushed away from the center with 100 being twice far away from the center. And the tangents are pulled towards the center.

Twist

Merge

Boolean operator on shapes

Offset Path

Interpolates the shape with its center point and bezier tangents with the opposite direction

Zig Zag

Changes the edges of affected shapes into a series of peaks and valleys of uniform size