Overview

A new element with type: "3D" is created
The original 2D shape parameters are preserved in the extrusionSource field
Additional 3D-specific properties control the extrusion depth, beveling, and corner styles

For details on extruded shapes, see the 3D Element documentation.

Shape Properties

Prop	Type	Required	Example	Value Range	Description
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	The type of shape element, such as rectangle, circle, or polygon.
fill	string \| object	true	#FFFFFF	-	The fill of the shape. Can be a hex color string (e.g., "#FFFFFF") or a gradient object with type "linear" or "radial", colorStops array, and start/end coordinates.
stroke	string	false	-	-	The stroke color of the shape, in hex format.
strokeWidth	number	false	-	>= 0	The width of the stroke applied to the shape, in pixels.
keyframes	array	false	-	-	An array of keyframes defining animation states and transitions for the shape element.
view	object	true	-	-	The view settings for the shape element, including position, scale, and rotation.
transform	object	true	-	-	The transformation settings for the shape element, including skew and alpha.
paths	array	false	-	-	An array of path data for the shape element, used when shapeType is SHAPE_PATH.

Note: SHAPE_RECT, SHAPE_ELLIPSE, SHAPE_STAR, and SHAPE_POLYGON are basic shapes, while SHAPE_PATH refers to a path shape constructed using Bézier curves.

View

Prop	Type	Required	Example	Value Range	Description
x	number	true	0	>= 0	The horizontal position of the shape element, in pixels.
y	number	true	0	>= 0	The vertical position of the shape element, in pixels.
width	number	true	100	>= 0	The width of the shape element, in pixels.
height	number	true	100	>= 0	The height of the shape element, in pixels.
scaleX	number	true	1	> 0	The horizontal scaling factor of the shape element. A value greater than 1 enlarges the element, while a value between 0 and 1 shrinks it.
scaleY	number	true	1	> 0	The vertical scaling factor of the shape element. A value greater than 1 enlarges the element, while a value between 0 and 1 shrinks it.
rotation	number	true	0	>= 0	The rotation angle of the shape element, in degrees.

Transform

Prop	Type	Required	Example	Value Range	Description
x	number	true	0	>= 0	The horizontal position of the shape element, in pixels.
y	number	true	0	>= 0	The vertical position of the shape element, in pixels.
anchorX	number	true	-	-	The x-coordinate of the anchor point relative to the shape element, in pixels.
anchorY	number	true	-	-	The y-coordinate of the anchor point relative to the shape element, in pixels.
rotation	number	true	0	>= 0	The rotation angle of the shape element, in degrees.
scaleX	number	true	1	> 0	The horizontal scaling factor of the shape element. A value greater than 1 enlarges the element, while a value between 0 and 1 shrinks it.
scaleY	number	true	1	> 0	The vertical scaling factor of the shape element. A value greater than 1 enlarges the element, while a value between 0 and 1 shrinks it.
alpha	number	true	1	0 - 1	The transparency level of the shape element. 1 represents full opacity, and 0 represents full transparency.

Basic Shape Example

shapeElement.json

{
  "id": "ca6664b1-3ddf-4525-9137-1ad2440788bd",
  "type": "Shape",
  "start": 0,
  "duration": 5,
  "trackIndex": 1,
  "x": 250.04168816332555,
  "y": 5.833740234374999,
  "blendMode": "normal",
  "anchorX": 0,
  "anchorY": 0,
  "view": {
      "width": 300,
      "height": 300,
      "x": 0,
      "y": 0,
      "scaleX": 1,
      "scaleY": 1,
      "rotation": 0,
      "anchorX": 0,
      "anchorY": 0
  },
  "rotation": 0,
  "scaleX": 1,
  "scaleY": 1,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "transform": {
      "x": 0,
      "y": 0,
      "anchorX": 0,
      "anchorY": 0,
      "rotation": 0,
      "scaleX": 1,
      "scaleY": 1,
      "alpha": 1
  },
  "keyframes": [],
  "shapeType": "SHAPE_RECT",
  "fill": "#818cf8",
  "stroke": "#4f46e5",
  "strokeWidth": 5
}

Path Shape Example

shapeElement.json

{
  "id": "9106fbc1-e753-43b1-bccc-5402bee3bd40",
  "type": "Shape",
  "start": 0,
  "duration": 5,
  "trackIndex": 3,
  "x": 0,
  "y": 0,
  "blendMode": "normal",
  "anchorX": 0,
  "anchorY": 0,
  "rotation": 0,
  "scaleX": 1,
  "scaleY": 1,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "view": {
    "x": 0,
    "y": 0,
    "scaleX": 1,
    "scaleY": 1,
    "rotation": 0,
    "anchorX": 0,
    "anchorY": 0
  },
  "transform": {
    "x": 0,
    "y": 0,
    "anchorX": 0,
    "anchorY": 0,
    "rotation": 0,
    "scaleX": 1,
    "scaleY": 1,
    "alpha": 1
  },
  "keyframes": [],
  "shapeType": "SHAPE_PATH",
  "fill": "#EAA0E3",
  "fillAlpha": 1,
  "fillType": 1,
  "stroke": null,
  "strokeWidth": 1,
  "paths": [
    {
      "c": 1,
      "v": [
        [349.601, 146.124],
        [345.894, 171.368],
        [174.8, 268.894],
        [135.70100000000002, 265.807],
        [118.95800000000003, 262.498],
        [31.56900000000003, 309.817],
        [67.26600000000003, 242.913],
        [0, 146.124],
        [174.801, 23.354],
        [349.601, 146.124]
      ],
      "i": [
        [0, 0],
        [2.4329999999999927, -8.150000000000006],
        [84.21999999999997, 0],
        [12.568999999999988, 2.0229999999999677],
        [5.459999999999994, 1.2860000000000014],
        [0, 0],
        [-4.677000000000007, 19.093999999999994],
        [0, 39.321],
        [-96.54399999999998, 0],
        [0, -67.804]
      ],
      "o": [
        [0, 8.651999999999987],
        [-16.567999999999984, 55.691],
        [-13.445999999999998, 0],
        [-5.693999999999988, -0.9119999999999777],
        [-33.803, 35.70800000000003],
        [21.046, -21.045999999999992],
        [-40.93500000000003, -22.461000000000013],
        [0, -67.804],
        [96.54399999999998, 0],
        [0, 0]
      ]
    }
  ]
}