Shape Layer Type
Shape layers define a set of shapes and shape modifiers grouped together. It has a single specific property (shapes) and others shared with other layer types (transform, masks, effects, layer styles).
| Definition | Name | Type | Required | Default |
|---|---|---|---|---|
| Type | ty | Layer Types | ✅ | 4 |
| Shapes | shapes | Array[Shape Properties] | ✅ | |
| Index | ind | Number | ✅ | |
| Transform | ks | Object | ✅ | |
| Parent | parent | Number | ➖ | |
| In Point | ip | Number | ➖ | |
| Out Point | op | Number | ➖ | |
| Start Point | st | Number | ➖ | |
| Time stretch | sr | Number | ➖ | 1 |
| Masks | masksProperties | Array[Mask Elements] | ➖ | |
| Track Matte Masked Layer | tt | Matte Mask types | ➖ | |
| Track Matte Masking Layer | td | Number | ➖ | |
| Track Matte Masking Layer Index | tp | Number | ➖ | |
| Blend Mode | bm | Blend Mode types | ➖ |
Type Property
Shapes Property
Details
Property name: shapes
Property type: Array { Group Element | Transform Element | Rectangle Element | Ellipse Element | Polystar Element | Shape Element | Fill Property | Gradient Fill Property | Stroke Property | Merge Paths Property | Offset Paths Property | Repeater Property | Trim Paths Property }
Shapes is a collection of paths and path modifiers like fills, colors, groups, trim paths. Each property has a type defined by the "ty" prop.
Group Element
Type Property
A group contains a list of shape properties that are rendered as part of that group. Any modifiers defined within the group will only apply to the stack preceding the modifier but only scoped inside the group.
Items Property
Details
Property name: it
Property type: Array { Group Element | Transform Element | Rectangle Element | Ellipse Element | Polystar Element | Shape Element | Fill Property | Gradient Fill Property | Stroke Property | Merge Paths Property | Offset Paths Property | Repeater Property | Trim Paths Property }
Required
The list of items defined within the group
Transform Element
A transform property that is applied to the stack of elements preceding it
Rectangle Element
Type Property
A rectangle is a parametric shape defined by its size, position and roundness.
Size Property
Size is a two dimensional array that represents the width and height of the rectangle.
Details
Position Property
Property name: p
Property type: Array | Multi Dimensional Animated Property
Position is a two-dimensional array that represents the coordinates of the rectangle relative to its containing group.
Roundness Property
Roundness is a one-dimensional value that represents the roundness of the rectangle corners.
Ellipse Element
Type Property
An ellipse is a parametric shape defined by its size and position
Size Property
Size is a two-dimensional array that represents the width and height of the rectangle.
Position Property
Position is a two-dimensional array that represents the coordinates of the rectangle relative to its containing group.
Polystar Element
Type Property
This element has two different subtypes that define a Star or a Polygon.
Its points, position, rotation, outer radius and outer roundness define a polygon.
A star is defined by all the same properties as a polygon, and it includes an inner roundness and inner radius.
Subtype Property
Points Property
Points is a one-dimensional number that defines the number of outer corners the parametric shape has.
For a polygon, it also equals the total number of corners.
For a star, the number of corners is double, since every segment is subdivided by an outer circle and an inner circle.
Position Property
Position is a two-dimensional array that represents the coordinates of the rectangle relative to its containing group.
Rotation Property
Position is a one-dimensional number that represents the rotation angle in degrees of the shape.
Outer Radius Property
Outer radius is a one-dimensional number that represents the radius of a circle where the outer points of the shape should be inscribed.
Outer Roundness Property
Outer roundness is a one-dimensional number that represents the length of the control points of a bezier curve by which the corners of the shape should be drawn. Those control points should be tangent to the circle defined by the outer radius property.
Inner Radius Property
Inner radius is a one-dimensional number that represents the radius of a circle where the inner points of the star should be inscribed.
Inner Roundness Property
Inner roundness is a one-dimensional number that represents the length of the control points of a bezier curve by which the corners of the inner points of the star should be drawn. Those control points should be tangent to the circle defined by the inner radius property.
Shape Element
Type Property
This element has a single property defining the path of the shape
Path Property
The shape described by the collection of bezier curves.
Fill Property
Type Property
This property defines the fill color that should be applied to the stack of elements preceding it. It has two inner properties, color and opacity
Color Property
The color of the fill
Opacity Property
The opacity of the fill
Gradient Fill Property
Type Property
This property defines the gradient fill color that should be applied to the stack of elements preceding it. It has seven properties: Type, Start Point, End Point, Highlight Angle, Highlight Length, Colors, Opacity.
Gradient Type Property
This property only accepts two values and describes the type of gradient that should be applied.
Start Point Property
A two-dimensional array that represents the coordinates of the starting point of the gradient interpolation.
End Point Property
A two-dimensional array that represents the coordinates of the end point of the gradient interpolation.
Highlight Length Property
A value that offsets the starting point of the gradient.
Highlight Angle Property
A value that defines the angle by which the starting point of the gradient will be offset.
Color Property
The set of colors that define the gradient
Opacity Property
The opacity of the gradient fill
Stroke Property
Type Property
This property defines the stroke color and width that should be applied to the stack of elements preceding it. It has six inner properties, color, opacity, stroke width, line cap, line join, miter limit.
Color Property
The color of the fill
Opacity Property
The opacity of the fill
Stroke Width Property
The width of the stroke applied to the shapes. It does not accept negative numbers.
Line Cap Property
The line cap of the stroke
Line Join Property
The line join of the stroke
Miter Limit Property
The miter limit is a one-dimensional value that applies only if the line join value of the stroke is Miter Join.
Gradient Stroke Property
Type Property
Defines the gradient stroke color and width that should be applied to the stack of elements preceding it. It has eleven inner properties, color, opacity, stroke width, line cap, line join, miter limit.
Color Property
Describes the set of colors that define the gradient
Opacity Property
The opacity of the fill
Stroke Width Property
The width of the stroke applied to the shapes
Line Cap Property
The line cap of the stroke
Line Join Property
The line join of the stroke
Miter Limit Property
The miter limit is a value that applies only if the line join value of the stroke is Miter Join.
Gradient Type Property
This property only accepts two values and describes the type of gradient that should be applied.
Its values are
-
1 for Linear
-
2 for Radial
Start Point Property
A two dimensional array that represents the coordinates of the starting point of the gradient interpolation.
End Point Property
A two-dimensional array that represents the coordinates of the end point of the gradient interpolation.
Highlight Length Property
Highlight Angle Property
Merge Paths Property
Type Property
A merge path acts as a shape boolean operation applied to the set of shapes preceding it. It contains a single property, the merge mode.
Merge Mode Property
The merge mode defines the type of operation that should be applied to shapes.
Offset Paths Property
Type Property
The offset path modifier should grow or shrink the set of shapes preceding it. It is defined by three properties: amount, line join and miter limit.
Amount Property
A one-dimensional value that defines how much the shape should grow or shrink
Line Join Property
The line join of the stroke
Miter Limit Property
A one-dimensional value that applies only if the line join value of the stroke is Miter Join
Repeater Property
Type Property
The repeater modifier creates copies of the set of shapes preceding it. It is defined by three properties: copies, offset, transform.
Copies Property
A one-dimensional value that defines how many copies (including the original shape) of the shapes should be drawn
Offset Property
A one-dimensional value that defines how many copies should be skipped before starting the count of shapes to be drawn.
This value should be accounted for in order to calculate the following transform property.
Transform Property
For each copy of a repeater, this transform operation is applied before the drawing operation is applied. This allows to generate copies of the original drawing with a combination of regular transform operations between them.
When the offset property is different from 0, these transform operations should accumulate by the amount that the offset value defines before being applied to the first copy.
Round Corners Property
Type Property
This modifier affects any vertex of a shape whose bezier control points are 0. It has a single property that defines the radius of the effect.
Roundness Property
A one-dimensional value that defines the length of the control points of the bezier curve that should be applied to the vertex. The direction of the control point should be tangent to the vertex itself.
Trim Paths Property
Type Property
This modifier changes the shape of the set of elements preceding it. Although in general, trim paths are expected to only affect the stroke of a shape, this modifier should affect both how strokes and fills are applied.
The way the new shape is calculated should measure the full perimeter of the shape individually (or the full set of shapes if Trim Multiple Shapes property is set to Individually) and regenerate the new set of paths as a percentage of the original set.
It is defined by four properties: Start, End, Offset and Trim Multiple Shapes.
Start Property
A one-dimensional value that defines the initial point of the shape that should be drawn relative to the initial point of the original shape. It is expressed as a percentage of the initial value.
End Property
A one-dimensional value that defines the end point of the shape that should be drawn relative to the end point of the original shape. It is expressed as a percentage of the end value.
Offset Property
A one-dimensional value that defines an offset by which the start and end points should be calculated. A whole cycle is expressed as a 360 offset.
Trim Multiple Shapes Property
Simultaneous means that all shapes should be trimmed applying the calculations separately. Individual means that a single trim effect should be applied to all of them by calculating the full length of all shapes together.