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

Graphic Element

Element used to display vector data in a shape layer

Composition Diagram for Graphic Element Graphic Element Visual Object Modifier Repeater Offset Path Zig Zag Twist Trim Path Pucker Bloat Rounded Corners Shape Style No Style Gradient Stroke Gradient Stroke Fill Transform Shape Shape Rectangle PolyStar Path Ellipse Merge Group
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

The ty property defines the specific element type based on the following values:

ty Type
'el' Ellipse
'fl' Fill
'gf' Gradient
'gs' Gradient Stroke
'gr' Group
'mm' Merge
'no' No Style
'op' Offset Path
'sh' Path
'sr' PolyStar
'pb' Pucker Bloat
'rc' Rectangle
'rp' Repeater
'rd' Rounded Corners
'st' Stroke
'tr' Transform Shape
'tm' Trim Path
'tw' Twist
'zz' Zig Zag

Shapes

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.

Composition Diagram for Shape Shape Graphic Element Visual Object Rectangle PolyStar Path Ellipse
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

d Shape Direction

Direction

Direction the shape is drawn as, mostly relevant when using trim path

Ellipse

Ellipse shape

Composition Diagram for Ellipse Ellipse Shape Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'el'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

d Shape Direction

Direction

Direction the shape is drawn as, mostly relevant when using trim path

p Position

Position

Position

s Vector

Size

Size

Rectangle

A simple rectangle shape

Composition Diagram for Rectangle Rectangle Shape Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'rc'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

d Shape Direction

Direction

Direction the shape is drawn as, mostly relevant when using trim path

p Position

Position

Center of the rectangle

s Vector

Size

Size

r Scalar

Rounded

Rounded corners radius

PolyStar

PolyStar

Star or regular polygon

Composition Diagram for PolyStar PolyStar Shape Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'sr'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

d Shape Direction

Direction

Direction the shape is drawn as, mostly relevant when using trim path

p Position

Position

Position

or Scalar

Outer Radius

Outer Radius

os Scalar

Outer Roundness

Outer Roundness as a percentage

r Scalar

Rotation

Rotation, clockwise in degrees

pt Scalar

Points

Points

sy Star Type

Star Type

Star Type

ir Scalar

Inner Radius

Inner Radius

is Scalar

Inner Roundness

Inner Roundness as a percentage

Path

Custom Bezier shape

Composition Diagram for Path Path Shape Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'sh'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

d Shape Direction

Direction

Direction the shape is drawn as, mostly relevant when using trim path

ks Bezier

Shape

Bezier path

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.

Composition Diagram for Shape Style Shape Style Graphic Element Visual Object No Style Gradient Stroke Gradient Stroke Fill
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

o Scalar

Opacity

Opacity, 100 means fully opaque

Fill

Solid fill color

Composition Diagram for Fill Fill Shape Style Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'fl'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

o Scalar

Opacity

Opacity, 100 means fully opaque

c Color

Color

Color

r Fill Rule

Fill Rule

Fill Rule

Stroke

Solid stroke

Composition Diagram for Stroke Stroke Shape Style Base Stroke Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'st'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

o Scalar

Opacity

Opacity, 100 means fully opaque

lc Line Cap

Line Cap

Line Cap

lj Line Join

Line Join

Line Join

ml number

Miter Limit

Miter Limit

ml2 Scalar

Miter Limit

Animatable alternative to ml

w Scalar

Width

Stroke width

d array of Stroke Dash

Dashes

Dashed line definition

c Color

Color

Stroke color

Stroke Dashes

An item used to described the dash pattern in a stroked path

A stroke dash array consists of n dash entries, [n-1,n] gap entries and [0-1] offset entries.

Dash and gap entries MUST all be in a continuous order and alternate between dash and gap, starting with dash. If there are an odd number of dashes + gaps, the sequence will repeat with dashes and gaps reversed. For example a sequence of [4d, 8g, 16d] MUST be rendered as [4d, 8g, 16d, 4g, 8d, 16g].

Offset entry, if present, MUST be at the end of the array.

Composition Diagram for Stroke Dash Stroke Dash Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

n Stroke Dash Type

Dash Type

Dash Type

v Scalar

Length

Length of the dash

Gradient Fill

Gradient fill color

Composition Diagram for Gradient Gradient Shape Style Base Gradient Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'gf'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

o Scalar

Opacity

Opacity, 100 means fully opaque

g Gradient

Colors

Gradient colors

s Position

Start Point

Starting point for the gradient

e Position

End Point

End point for the gradient

t Gradient Type

Gradient Type

Type of the gradient

h Scalar

Highlight Length

Highlight Length, as a percentage between s and e

a Scalar

Highlight Angle

Highlight Angle in clockwise degrees, relative to the direction from s to e

r Fill Rule

Fill Rule

Fill Rule

Gradient Stroke

Gradient stroke

Composition Diagram for Gradient Stroke Gradient Stroke Shape Style Base Stroke Base Gradient Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'gs'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

o Scalar

Opacity

Opacity, 100 means fully opaque

lc Line Cap

Line Cap

Line Cap

lj Line Join

Line Join

Line Join

ml number

Miter Limit

Miter Limit

ml2 Scalar

Miter Limit

Animatable alternative to ml

w Scalar

Width

Stroke width

d array of Stroke Dash

Dashes

Dashed line definition

g Gradient

Colors

Gradient colors

s Position

Start Point

Starting point for the gradient

e Position

End Point

End point for the gradient

t Gradient Type

Gradient Type

Type of the gradient

h Scalar

Highlight Length

Highlight Length, as a percentage between s and e

a Scalar

Highlight Angle

Highlight Angle in clockwise degrees, relative to the direction from s to e

No Style

Represents a style for shapes without fill or stroke.

Composition Diagram for No Style No Style Shape Style Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'no'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

o Scalar

Opacity

Opacity, 100 means fully opaque

Grouping

Group

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

The usual contents of a group are:

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:

Composition Diagram for Group Group Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'gr'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

np number

Number Of Properties

Number Of Properties

it array of Graphic Element

Shapes

Shapes

cix integer

Property index

Index used in expressions

Transform

Basically the same as Transform but with the ty attribute.

Composition Diagram for Transform Shape Transform Shape Graphic Element Transform Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'tr'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

a Position

Anchor Point

Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale)

p Splittable Position

Position

Position / Translation

r Scalar

Rotation

Rotation in degrees, clockwise

s Vector

Scale

Scale factor, [100, 100] for no scaling

o Scalar

Opacity

Opacity

sk Scalar

Skew

Skew amount as an angle in degrees

sa Scalar

Skew Axis

Direction along which skew is applied, in degrees (0 skews along the X axis, 90 along the Y axis)

rx Scalar

X Rotation

Split rotation component

ry Scalar

Y Rotation

Split rotation component

rz Scalar

Z Rotation

Split rotation component, equivalent to r when not split

or Vector

Orientation

Orientation

Transform shapes MUST always be present in the group and they MUST be the last item in the it array.

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.

Composition Diagram for Repeater Repeater Modifier Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'rp'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

c Scalar

Copies

Number of copies

o Scalar

Offset

Offset

m Composite

Composite

Stacking order

tr Repeater Transform

Transform

Transform applied to 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:

Composition Diagram for Repeater Transform Repeater Transform Transform
Attribute Type Title Description
a Position

Anchor Point

Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale)

p Splittable Position

Position

Position / Translation

r Scalar

Rotation

Rotation in degrees, clockwise

s Vector

Scale

Scale factor, [100, 100] for no scaling

o Scalar

Opacity

Opacity

sk Scalar

Skew

Skew amount as an angle in degrees

sa Scalar

Skew Axis

Direction along which skew is applied, in degrees (0 skews along the X axis, 90 along the Y axis)

rx Scalar

X Rotation

Split rotation component

ry Scalar

Y Rotation

Split rotation component

rz Scalar

Z Rotation

Split rotation component, equivalent to r when not split

or Vector

Orientation

Orientation

so Scalar

Start Opacity

Opacity of the first repeated object.

eo Scalar

End Opacity

Opacity of the last repeated object.

Attribute Type Description
so Animated number Start Opacity
eo Animated number End Opacity

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.

Composition Diagram for Trim Path Trim Path Modifier Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'tm'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

s Scalar

Start

Segment start

e Scalar

End

Segment end

o Scalar

Offset

Offset

m Trim Multiple Shapes

Multiple

How to treat multiple copies

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

Rounds corners of other shapes

Composition Diagram for Rounded Corners Rounded Corners Modifier Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'rd'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

r Scalar

Radius

Radius

Pucker / Bloat

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

Composition Diagram for Pucker Bloat Pucker Bloat Modifier Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'pb'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

a Scalar

Amount

Amount as a percentage

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.

The center is defined as the mean of the bezier vertices.

Twist

Composition Diagram for Twist Twist Modifier Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'tw'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

a Scalar

Angle

Angle

c Vector

Center

Center

Merge

Boolean operator on shapes

Composition Diagram for Merge Merge Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'mm'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

mm Merge Mode

Merge Mode

Merge Mode

Offset Path

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

Composition Diagram for Offset Path Offset Path Modifier Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'op'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

a Scalar

Amount

Amount

lj Line Join

Line Join

Line Join

ml Scalar

Miter Limit

Miter Limit

Zig Zag

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

Composition Diagram for Zig Zag Zig Zag Modifier Graphic Element Visual Object
Attribute Type Title Description
nm string

Name

Human readable name, as seen from editors and the like

mn string

Match Name

Match name, used in expressions

hd boolean

Hidden

Whether the shape is hidden

ty string = 'zz'

Shape Type

Shape Type

bm Blend Mode

Blend Mode

Blend Mode

ix integer

Property index

Index used in expressions

cl string

CSS Class

CSS class used by the SVG renderer

ln string

Layer XML ID

id attribute used by the SVG renderer

r Scalar

Frequency

Number of ridges per segment

s Scalar

Amplitude

Distance between peaks and troughs

pt Scalar

Point Type

Point type (1 = corner, 2 = smooth)