# AnimGraphLab Documentation Procedural node based online SVG and animation documentation. ## Nodes - [Arrow](https://animgraphlab.com/docs/nodes/arrow): Generates an arrow shape with adjustable shaft and head dimensions. - [Artboard](https://animgraphlab.com/docs/nodes/artboard): Serves as the final canvas for rendering designs, defining the output dimensions and background. - [Artboard merge](https://animgraphlab.com/docs/nodes/artboard-merge): Combines multiple artboards into a single grid layout. - [Attribute copy](https://animgraphlab.com/docs/nodes/attribute-copy): Copies attributes between streams of geometry. - [Attribute create](https://animgraphlab.com/docs/nodes/attribute-create): Adds or edits custom attributes on shapes or points. - [Attribute delete](https://animgraphlab.com/docs/nodes/attribute-delete): Deletes specified attributes from points or shapes. - [Attribute promote](https://animgraphlab.com/docs/nodes/attribute-promote): Promotes or demotes attributes from one geometry class to another. - [Attribute randomize](https://animgraphlab.com/docs/nodes/attribute-randomize): Adds variation to points or shapes attributes to control instancing, transforms, and procedural effects. - [Attribute remap](https://animgraphlab.com/docs/nodes/attribute-remap): Fits an attribute\ - [Attribute rename](https://animgraphlab.com/docs/nodes/attribute-rename): Renames or deletes point and shape attributes. - [Attribute transfer](https://animgraphlab.com/docs/nodes/attribute-transfer): Transfers attributes between two shapes based on spatial proximity. - [Bend](https://animgraphlab.com/docs/nodes/bend): Curves and deforms shapes along a defined line using an interactive gizmo. - [Bevel](https://animgraphlab.com/docs/nodes/bevel): Rounds selected points (corners) of shapes by a specified amount. - [Blend](https://animgraphlab.com/docs/nodes/blend): Blends two sets of shapes together using various compositing operations. - [Blur](https://animgraphlab.com/docs/nodes/blur): Applies a uniform, directional or progressive blur to incoming shape(s). - [Boolean](https://animgraphlab.com/docs/nodes/boolean): Performs boolean operations between two sets of shapes. - [Bounds](https://animgraphlab.com/docs/nodes/bounds): Generates bounding geometry around input shape(s). - [Clip](https://animgraphlab.com/docs/nodes/clip): Removes geometry on one side of a clipping plane. - [Color](https://animgraphlab.com/docs/nodes/color): Applies a solid color fill/stroke to an incoming shape(s). - [Controller](https://animgraphlab.com/docs/nodes/controller): Create custom interfaces to drive parameters on multiple nodes from a single location. - [Copy and transform](https://animgraphlab.com/docs/nodes/copy-and-transform): Creates copies of geometry and applies successive, cumulative transformations to them. - [Copy to points](https://animgraphlab.com/docs/nodes/copy-to-points): Copies input geometry onto the points of a target geometry. - [Delete](https://animgraphlab.com/docs/nodes/delete): Removes specific shapes or points from the geometry stream based on group selection. - [Donut](https://animgraphlab.com/docs/nodes/donut): Generates a ring shape defined by an outer and inner radius. - [Edge cutter](https://animgraphlab.com/docs/ui/nodegraph/edge-cutter): Learn how to quickly delete multiple edges using the Edge Cutter tool. - [Ellipse](https://animgraphlab.com/docs/nodes/ellipse): Generates a basic elliptical or circular shape. - [Export](https://animgraphlab.com/docs/nodes/export): Renders and saves the final output of a graph to a specified file format. - [Exported SVG Structure](https://animgraphlab.com/docs/export/exported-svg-structure): A technical breakdown of the DOM structure, payload, and geometry rules of exported SVGs. - [Expressions](https://animgraphlab.com/docs/ui/parameters-panel/expressions): Learn how to use expressions to dynamically control parameters. - [Extract center](https://animgraphlab.com/docs/nodes/extract-center): Generates point(s) at specific locations relative to the bounding box of input shape(s). - [Extrude 3D](https://animgraphlab.com/docs/nodes/extrude): Generates pseudo-3D shape based on 2D shape(s) - [Falloff](https://animgraphlab.com/docs/nodes/falloff): The Falloff node creates a spatial field (Radial or Linear) that assigns a normalized 0-1 weight attribute to shapes and points, driving procedural MoGraph effects. - [Free tier limits](https://animgraphlab.com/docs/ui/free-tier-limits): A list of limits of the free plan. - [Freeform gradient](https://animgraphlab.com/docs/nodes/freeform-gradient): Creates a mesh-like gradient fill that can be applied to shapes. - [Graphs as components](https://animgraphlab.com/docs/animation/state-machine/components): Relationship between Graphs, Subnets, and the State Machine. - [Group](https://animgraphlab.com/docs/nodes/group): Groups points or shapes to a target selection. - [Group expand](https://animgraphlab.com/docs/nodes/group-expand): Grow or shrink a group selection based on proximity or connectivity. - [Group invert](https://animgraphlab.com/docs/nodes/group-invert): Create a new group containing everything NOT in a specified group. - [Hatch](https://animgraphlab.com/docs/nodes/hatch): Generates hatching lines, crosshatching, zig-zags, or scribbles. - [Import](https://animgraphlab.com/docs/nodes/import): Imports external SVG, raster image files. - [Interactive states](https://animgraphlab.com/docs/animation/state-machine/interactive-states): Learn how to build common interactions like Hover, Click, and Press-and-Hold using the State Machine. - [Interpolate](https://animgraphlab.com/docs/nodes/interpolate): Morphs between multiple shapes by interpolating their paths. - [Keyboard shortcuts](https://animgraphlab.com/docs/ui/shortcuts): A complete reference for all available keyboard shortcuts inside AnimGraphLab. - [Light](https://animgraphlab.com/docs/nodes/light): Applies lighting and shadow effects to shapes, adding depth and realism. - [Line](https://animgraphlab.com/docs/nodes/line): Generates a straight line segment with a specified direction, length, and point count. - [Linear gradient](https://animgraphlab.com/docs/nodes/linear-gradient): Creates a linear gradient fill that applied to shapes. - [Mask](https://animgraphlab.com/docs/nodes/mask): Uses one set of shapes to control the visibility of another, with optional compositing. - [Match size](https://animgraphlab.com/docs/nodes/match-size): Aligns, translates, and scales a source geometry to match the bounding box of a target geometry. - [Merge](https://animgraphlab.com/docs/nodes/merge): Combines multiple shape streams into a single output, controlling the layering order. - [Metadata](https://animgraphlab.com/docs/nodes/metadata): Adds accessibility and authorship information to the exported SVG. - [Mirror](https://animgraphlab.com/docs/nodes/mirror): Mirrors a shape across a vertical or horizontal axis, with an option to weld the result into a single shape. - [Morph](https://animgraphlab.com/docs/nodes/morph): Morphs geometry and styles between two arbitrary shapes. - [Noise](https://animgraphlab.com/docs/nodes/noise): Deforms shapes by displacing their points using procedural noise. - [Null](https://animgraphlab.com/docs/nodes/null): A utility node that passes input data through to the output unchanged. - [Overview](https://animgraphlab.com/docs/animation/state-machine/overview): An overview of the State Machine and how it makes animations interactive. - [Overview](https://animgraphlab.com/docs/ui/canvas/overview): Learn how to navigate and interact with Canvas viewport. - [Overview](https://animgraphlab.com/docs/ui/nodegraph/overview): An overview of the Nodegraph interface and its shortcuts. - [Overview](https://animgraphlab.com/docs/ui/parameters-panel/overview): An overview of controls and shortcuts in the Parameters Panel. - [Pack shapes](https://animgraphlab.com/docs/nodes/pack-shapes): Packs multiple shapes tightly into a bounded area or container shape using a 2D bin packing algorithm. - [Parameter referencing](https://animgraphlab.com/docs/ui/parameters-panel/parameter-referencing): Learn how to link parameters together to create dynamic relationships between nodes. - [Parameters presets](https://animgraphlab.com/docs/ui/parameters-panel/parameters-presets): Learn how to save, apply, and manage reusable sets of parameters for your nodes. - [Parent constraint](https://animgraphlab.com/docs/nodes/parentConstraint): Constrains the position, rotation, and scale of a source object to match a target parent object. - [Path](https://animgraphlab.com/docs/nodes/path): Create custom vector shapes using points and bezier handles. - [Pattern generator](https://animgraphlab.com/docs/nodes/pattern): Arranges shapes into repeating grids, radial arrays, or organic distributions. - [Pattern matching](https://animgraphlab.com/docs/ui/parameters-panel/pattern-matching): Learn how to use pattern matching to select specific shapes, points, or indices. - [Pencil](https://animgraphlab.com/docs/nodes/pencil): Draw freehand strokes that can be filled, outlined and erased. - [Perspective](https://animgraphlab.com/docs/nodes/perspective): Distorts incoming shapes in perspective using a 4-point visual gizmo. - [Pixelate](https://animgraphlab.com/docs/nodes/pixelate): Converts shapes into a grid of pixel-like squares. - [Polygon](https://animgraphlab.com/docs/nodes/polygon): Generates a regular polygon with a specified number of sides. - [Portal](https://animgraphlab.com/docs/nodes/portal): Fetches geometry from Null nodes anywhere in the graph without using wires, enabling clean and organized graph structures. - [Radial gradient](https://animgraphlab.com/docs/nodes/radial-gradient): Creates a radial gradient fill that applied to shapes. - [Rectangle](https://animgraphlab.com/docs/nodes/rectangle): Generates a basic rectangular shape. - [Resample](https://animgraphlab.com/docs/nodes/resample): Rebuilds curves by adding or removing points to create an even distribution. - [Retime](https://animgraphlab.com/docs/nodes/retime): Alters the playback speed, timing, and looping behavior of animated upstream geometry. - [Scatter](https://animgraphlab.com/docs/nodes/scatter): Scatters points randomly inside a shape\ - [Separate shapes](https://animgraphlab.com/docs/nodes/separateShapes): Splits a single shape with multiple contours into individual shapes, or re-labels multiple incoming shapes with indexed names. - [Shape along path](https://animgraphlab.com/docs/nodes/shapeAlongPath): Maps and distributes geometry along the curve of a path. - [Shape mixer](https://animgraphlab.com/docs/nodes/shape-mixer): Combines multiple shapes to be randomly distributed with weights for use with nodes like Copy to Points. - [Sharing projects](https://animgraphlab.com/docs/ui/dashboard/sharing): Learn how to make your projects public and share them with a unique link. - [Smooth](https://animgraphlab.com/docs/nodes/smooth): Relaxes and smooths the points of a shape to create organic, flowing curves. - [Snippet](https://animgraphlab.com/docs/nodes/snippet): Generate, modify, and manage geometry by using API and/or writing custom JavaScript. - [Spiral](https://animgraphlab.com/docs/nodes/spiral): Generates a spiral path defined by start/end radii and revolutions. - [Split](https://animgraphlab.com/docs/nodes/split): Isolates a specific subset of geometry based on group selection. - [Spreadsheet](https://animgraphlab.com/docs/ui/spreadsheet): Inspect the raw geometry data, point attributes, and shape properties flowing through nodegraph. - [Star](https://animgraphlab.com/docs/nodes/star): Generates a star shape with a configurable number of points and inner/outer radii. - [Subnet](https://animgraphlab.com/docs/nodes/subnet): Encapsulates a part of nodegraph into a single, reusable component, helping to organize complex setups. - [Subnet input](https://animgraphlab.com/docs/nodes/subnetInput): The entry point for data flowing into a Subnet from its parent graph. - [Subnet output](https://animgraphlab.com/docs/nodes/subnetOutput): The exit point for data flowing out of a Subnet back to its parent graph. - [Switch](https://animgraphlab.com/docs/nodes/switch): Routes geometry flow between two paths based on logical conditions. - [Text](https://animgraphlab.com/docs/nodes/text): Generates text with a wide range of typographic controls. - [Text on path](https://animgraphlab.com/docs/nodes/textPath): Warps text along the curve of a path or shape. - [Transform](https://animgraphlab.com/docs/nodes/transform): Applies transformations like position, scale, and rotation to an incoming shape(s). - [Trapezoid](https://animgraphlab.com/docs/nodes/trapezoid): Generates a trapezoid shape defined by top width, bottom width, and height. - [Triangulate](https://animgraphlab.com/docs/nodes/triangulate): Decomposes geometry into a mesh of triangles or polygons. - [Trim path](https://animgraphlab.com/docs/nodes/trim-path): Trims a path\ - [User interface](https://animgraphlab.com/docs/ui/index): An overview of the main components of the AnimGraphLab user interface. - [Variations](https://animgraphlab.com/docs/nodes/variations): Multiplies the incoming data stream to generate parallel variations (wedging). - [Vectorize](https://animgraphlab.com/docs/nodes/vectorize): Converts PNG, JPG, WEBP raster images into SVG vector graphics. - [Warp](https://animgraphlab.com/docs/nodes/warp): Deforms geometry by displacing points using noise or ripple. - [Wrap](https://animgraphlab.com/docs/nodes/wrap): Projects 2D geometry onto the surface of a 3D Extrusion. ## Full Documentation ### Arrow URL: https://animgraphlab.com/docs/nodes/arrow Arrow node creates a geometric arrow shape composed of a rectangular shaft and a triangular head. It is useful for creating directional indicators, flowcharts, or annotations. You can independently control the dimensions of the shaft and the head to create various arrow styles, from thin pointers to blocky directional signs. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Translate | Sets the X and Y coordinates of the shape's center. | | Shaft length | The length of the arrow shaft. | | Shaft width | The width of the arrow shaft. | | Head length | The length of the arrowhead. | | Head width | The width of the arrowhead. | | Scale | Scales the shape from its center. | | Rotation | Rotates the shape around its center. | | Blur | Applies a Gaussian blur effect to the shape. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | blur | Blur | | headLength | Head length | | headWidth | Head width | | label | Label | | layers | Layers | | position.x | Translate X | | position.y | Translate Y | | rotation | Rotation | | scale | Scale | | shaftLength | Shaft length | | shaftWidth | Shaft width | --- ### Artboard URL: https://animgraphlab.com/docs/nodes/artboard Artboard node acts as the final canvas, defining the dimensions and background color for output. Whatever is connected to the Artboard's input will be rendered to the final image or video. > Note: Artboard node must follow by a an Export node to do the actuall export process. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Translate | Sets the canvas position in the graph view. | | Scale content | Scales the content proportionally based on the ratio between the "current size" and "reference size". | | Reference size | The base dimensions the content was designed for. | | Toggle background visibility | Toggles the visibility of the background. | | Type | The type of background for the artboard. | | Color | The solid background color of the artboard. | | Color stops | The colors and positions in the gradient. | | Start | Start point of the linear gradient. | | End | End point of the linear gradient. | | Center | Center of the radial gradient. | | Radius | The radius of the radial gradient. | | Center content | Automatically centers all incoming shapes within the artboard. | | Resize to fit | Resizes incoming content to fit within the artboard dimensions, respecting padding. | | Padding | The padding to maintain between the content and the artboard edges when resizing to fit. | | Fit offset | An additional offset to apply to the content after it has been centered and resized. | | Watermark | Overlay a watermark image on the artboard. | | Source | Image or SVG for watermark. | | Placement | Position of the watermark. | | Opacity | Watermark transparency. | | Scale | Scale of the watermark. | | Padding | Padding from edges. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | backgroundColor | Color | | backgroundType | Type | | backgroundVisible | Toggle background visibility | | centerContent | Center content | | fitOffset.x | Translate X | | fitOffset.y | Translate Y | | gradientCenter.x | X | | gradientCenter.y | Y | | gradientEnd.x | X | | gradientEnd.y | Y | | gradientRadius | Radius | | gradientStart.x | X | | gradientStart.y | Y | | gradientStops | Color stops | | label | Label | | padding | Padding | | position.x | Translate X | | position.y | Translate Y | | referenceSize.height | Ref Height | | referenceSize.proportional | Proportional | | referenceSize.width | Ref Width | | resizeToFit | Resize to fit | | scaleContent | Scale content | | size.height | Height | | size.proportional | Proportional | | size.width | Width | | watermarkEnabled | Watermark | | watermarkFileName | Watermark File Name | | watermarkIsSvg | Watermark Is Svg | | watermarkIsSvgZ | Watermark Is Svg Z | | watermarkOpacity | Opacity | | watermarkOriginalHeight | Watermark Original Height | | watermarkOriginalWidth | Watermark Original Width | | watermarkPadding | Padding | | watermarkPlacement | Placement | | watermarkScale | Scale | | watermarkSrc | Source | ## Presets The Artboard node includes a variety of built-in presets to quickly set the dimensions for common devices and formats. --- ### Artboard merge URL: https://animgraphlab.com/docs/nodes/artboard-merge The Artboard Merge node allows arranging multiple incoming artboards into a grid. It takes the output from several Artboard nodes and lays them out based on the specified number of columns and padding. This can be useful for creating sprite sheets, comparing design variations side-by-side, or presenting a collection of graphics in a single view. The final output is a collection of artboards and their contents, which can then be connected to an Export node for final export. Clicking export button on Export node will export all artboards separately. > Note: Users on the free plan can connect a maximum of 2 inputs to the Artboard Merge node. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Columns | Number of columns in the grid. | | Rows | Number of rows in the grid. | | Padding X | Horizontal padding between artboards. | | Padding Y | Vertical padding between artboards. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | backgroundColor | Background Color | | backgroundVisible | Background Visible | | columns | Columns | | label | Label | | paddingX | Padding X | | paddingY | Padding Y | | rows | Rows | ## Usage Example - Create multiple Artboard nodes, each with different content. - Connect the output of each Artboard node to the input of a single Artboard Merge node. - Adjust the Columns, Horizontal Padding, and Vertical Padding parameters on the Artboard Merge node to arrange the artboards as desired. - Connect the Artboard Merge node to an Export node to render all images: raster or SVG. The node automatically calculates the required size for each cell in the grid to accommodate the largest artboard in that row or column, ensuring a clean and organized layout. --- ### Attribute copy URL: https://animgraphlab.com/docs/nodes/attribute-copy Attribute copy node transfers an attribute from one stream of geometry directly to another stream, based on their index alignment. Unlike Attribute Transfer (which works via spatial distance), Attribute copy works sequentially. This makes it ideal for copying attributes between geometries that share the exact same topology or point count. ## Inputs Input: Input 1 Source geometry (provides the attribute). Input: Input 3 Destination geometry (receives the attribute). ## Parameters | Parameter | Description | | --- | --- | | Label | The display name of the node. | | Group | The group of shapes to affect. | | Class | Where to look for the attribute. | | Attribute name | Name of the attribute to copy from Source. | | New name | Optional new name for the attribute on Destination. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | attributeClass | Class | | attributeName | Attribute name | | group | Group | | label | Label | | newName | New name | --- ### Attribute create URL: https://animgraphlab.com/docs/nodes/attribute-create Attribute create node allows to add custom data variables to geometry or edit existing ones. Attributes can be assigned either at the Point level (individual vertices/points making up the geometry) or the Shape level (the entire object as a whole). This custom data can later be read by other nodes (like Transform, Color, or Falloff) or expressions to drive procedural effects. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name of the node. | | Group | The group of shapes or points to affect. | | Class | Where to add the attribute. | | Name | The name of the attribute to create or edit. | | Type | The data type of the attribute. | | Number value | The numeric value to set. | | String value | The string value to set. | | Color value | The color value to set. | | Boolean value | The boolean value to set. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | attributeClass | Class | | attributeName | Name | | attributeType | Type | | booleanValue | Boolean value | | colorValue | Color value | | group | Group | | label | Label | | numberValue | Number value | | stringValue | String value | --- ### Attribute delete URL: https://animgraphlab.com/docs/nodes/attribute-delete Attribute delete node removes custom data attributes from geometry to clean up the data stream. You can specify a comma-separated list of attributes to either explicitly delete, or specify a list to keep (deleting all other non-essential custom attributes). ## Parameters | Parameter | Description | | --- | --- | | Label | The display name of the node. | | Group | The group of shapes or points to affect. | | Class | Where to look for the attribute. | | Attribute(s) | Comma-separated list of attributes to delete or keep. | | Mode | Whether to delete the specified attributes, or delete everything else and keep ONLY the specified attributes. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | attributeClass | Class | | attributeName | Attribute(s) | | deleteMode | Mode | | group | Group | | label | Label | --- ### Attribute promote URL: https://animgraphlab.com/docs/nodes/attribute-promote Attribute promote node converts an attribute from one class to another. For example, attribute that exists on individual Points can be promoted to the overall Shape, or a Shape attribute can be demoted down to all of its internal Points. When promoting from Points to a Shape, there will naturally be many points containing different values for a single shape. The Promotion method parameter dictates how these multiple values are combined (computing the mathematical average, finding the maximum value, or simply taking the first match). ## Parameters | Parameter | Description | | --- | --- | | Label | The display name of the node. | | Group | The group of shapes to affect. | | Original class | Current class of the attribute. | | New class | Destination class for the attribute. | | Original name | Name of the attribute to promote. | | New name | Optional new name. If empty, uses original name. | | Promotion method | Method used to combine multiple values. | | Delete original | Delete the original attribute after promoting. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | deleteOriginal | Delete original | | group | Group | | label | Label | | newClass | New class | | newName | New name | | originalClass | Original class | | originalName | Original name | | promotionMethod | Promotion method | --- ### Attribute randomize URL: https://animgraphlab.com/docs/nodes/attribute-randomize Attribute Randomize node injects variation into the graph: - Points mode to control the placement, scale, and rotation of copies. - Deep injection to randomize properties of Primitives (Rectangle width, Star points). - Shapes mode to randomize Modifiers (Noise amplitude, Bend angle) applied after copying. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Mode | Choose whether to randomize attributes on individual points or on whole shapes. | | Target | Determine whether to write randomized values as custom attributes or directly alter shape parameters (e.g. scale, rotation, layer color). | | Group | Specifies a subset of points or shapes to affect. Uses pattern matching. | | Parameter name | Comma-separated attribute(s) to randomize "rotation, pscale, ...". Connect shapes to "Reference" input for "Label:Param" suggestions. | | Operation | How the new value is combined with an existing attribute value. | | Distribution | The method used to generate random values. | | Frequency | The scale or zoom of the noise pattern. | | Offset | Pans the noise pattern in X and Y. | | Seed | Changes the random outcome. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | attributeName | Parameter name | | attributeSettings | Attribute Settings | | distribution | Distribution | | frequency | Frequency | | group | Group | | label | Label | | maxColor | Max | | maxFloat | Max | | maxRotation | Max | | minColor | Min | | minFloat | Min | | minRotation | Min | | mode | Mode | | offset.x | Offset X | | offset.y | Offset Y | | operation | Operation | | seed | Seed | | targetParam | Target | ## Distribution modes - Continuous: returns any decimal number between min and max (1.5, 2.7, 3.1). - Integer: rounds the result to the nearest whole number (1, 2, 3). - Binary: returns exactly the min value or the max value (0 or 1). - Stepped: snaps the value to a specific increment defined by Step input. min=0, max=90, Step=45 will produce 0, 45, or 90. ## Outliers Outliers allows to break uniformity of randomization by forcing a specific percentage of items to fall outside the standard Min/Max range. - Percent: probability (0-100%) that a value becomes an outlier. - Range: magnitude of deviation for the outlier. - Mode: Add: adds the Range to the limit (Max + Range). - Multiply: multiplies the limit by the Range (Max * Range). - Direction: Above max: outliers are strictly larger than Max. - Below min: outliers are strictly smaller than Min. - Both: outliers can be either larger or smaller. - Seed: separate seed to randomize which specific items become outliers, independent of their value generation. > Note: Range refers to Min and Max number inputs. ## Workflow 1: Randomizing copies When using Copy to Points, you often want every copy to look unique. To do this, you randomize the "seeds" (the points) before the geometry is copied onto them. By placing the node after the Scatter node, you modify the point cloud. When Copy to Points runs, it reads these randomized attributes and applies them to every new copy automatically. > Note: Attribute randomize node gives you much more parameters to randomize than build-in parameters on Scatter node. If you dont need to randomize anything but scale, position, you may not need to use Attribute Randomize node. Workflow 2: Per shape randomization (downstream) For example, applying a random Noise where every shape gets a different noise amplitude or offset. To randomize these, you must apply the effect after the copies are created, ie after Copy to Points or Copy & Transform nodes. This creates a "recipe" attached to each shape. When the Noise node processes the shapes, it checks if an attribute exists and uses that specific value for that specific shape instead of the global value. > Note: Generic attributes (like 'fillColor') applies to the first matching node in the chain after Attribute Randomize node. To target a specific node down the chain, prefix with the node name: 'Node Label:parameter' ( 'Color 2:fillColor'). > Note: notice that Attribute Randomize is placed BEFORE Noise node, the one to be randomized ## Workflow 3: Deep attribute injection For example you have a character and want to form a crowd of them but also randomize specific parts per copy. ### Unsupported nodes Noise Bend Clip Bevel Mirror Delete Split ## Examples --- ### Attribute remap URL: https://animgraphlab.com/docs/nodes/attribute-remap Attribute remap node shifts and scales existing numeric attribute values to fit within a completely new range. This is useful when taking an arbitrary attribute (like distances from 0 to 500) and converting it to a normalized range (0 to 1) for use in coloring, scaling, or opacity functions. You can enable the Curve (Ramp) to shape the remapping non-linearly, enabling precise control over easing and thresholds. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name of the node. | | Group | The group of shapes to affect. | | Class | Where to look for the attribute. | | Attribute name | Name of the numeric attribute to remap. | | New name | Optional new name. If empty, modifies original. | | Delete original | Delete the original attribute when renaming. | | Input min | Original minimum value. | | Input max | Original maximum value. | | Use curve | Use a curve to remap values instead of output min/max. | | Output min | New minimum value. | | Output max | New maximum value. | | Curve | Curve to shape the remapped value. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | attributeClass | Class | | attributeName | Attribute name | | deleteOriginal | Delete original | | group | Group | | inputMax | Input max | | inputMin | Input min | | label | Label | | newName | New name | | outputMax | Output max | | outputMin | Output min | | ramp | Curve | | useCurve | Use curve | --- ### Attribute rename URL: https://animgraphlab.com/docs/nodes/attribute-rename Attribute rename node allows to change the name of an existing attribute on geometry. This is useful when you want to feed custom data into a node that expects a specific attribute name. For example, renaming a custom myWeight attribute to weight so a Falloff driven node will automatically recognize it. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name of the node. | | Group | The group of shapes or points to affect. | | Class | Where to look for the attribute. | | Old name | Current name of the attribute. | | New name | New name for the attribute. | | Delete original | Delete the original attribute after copying. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | attributeClass | Class | | deleteOriginal | Delete original | | group | Group | | label | Label | | newName | New name | | oldName | Old name | --- ### Attribute transfer URL: https://animgraphlab.com/docs/nodes/attribute-transfer Attribute transfer node interpolates attributes from a source geometry to the closest elements on a destination geometry. Because it works purely by spatial distance (proximity in 2D space), it allows to copy attributes between objects even if they have completely different topologies or point counts. > Note: use the 'Blend width' parameter to create soft gradients where the transferred values smoothly fall off. ## Inputs Input: Input 1 Source geometry (provides the attribute). Input: Input 3 Destination geometry (receives the attribute). ## Parameters | Parameter | Description | | --- | --- | | Label | The display name of the node. | | Group | The group of shapes to affect. | | Class | Where to look for the attribute. | | Attribute name | Name of the attribute to transfer. | | Distance threshold | Maximum distance to search for source elements. | | Blend width | Distance over which the transferred value blends out. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | attributeClass | Class | | attributeName | Attribute name | | blendWidth | Blend width | | distanceThreshold | Distance threshold | | group | Group | | label | Label | --- ### Bend URL: https://animgraphlab.com/docs/nodes/bend The Bend node deforms a shape or path by curving it around a pivot point. It provides a 2D gizmo for interactively setting the bend's origin, direction, and length, allowing for intuitive warping and twisting effects. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Select points/shapes to bend. If empty, all are affected. | | Apply to | Process each shape independently, or treat all shapes as a single combined unit. | | Preset | The deformation preset to apply. | | Amount / Angle | The intensity of the deformation. Acts as Angle for Bend, and Percentage for other presets. | | Translate | The center point of the source capture line. | | Capture direction | The normal of the line along which to apply the Bend Angle. | | Capture length | The length of the capture region. | | Deform in both directions | Applies the Bend Angle in the direction opposite to the Capture Direction. | | Preserve points | Keep original vector points and bezier handles instead of resampling into dense linear segments. May be useful deforming Text. May cause distortion on sharp bends. | | Resample length | Approximate distance between resampled points. Smaller values create a smoother, more detailed bend. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | bendAngle | Amount / Angle | | captureDirection | Capture direction | | captureLength | Capture length | | captureOrigin.x | Translate X | | captureOrigin.y | Translate Y | | composition | Apply to | | deformInBothDirections | Deform in both directions | | group | Group | | label | Label | | mode | Preset | | preservePoints | Preserve points | | resampleLength | Resample length | ## Gizmo Controls To activate the gizmo, select the Bend node and press Enter while your mouse is over the canvas. The gizmo provides two handles for direct manipulation of the capture region. --- ### Bevel URL: https://animgraphlab.com/docs/nodes/bevel The Bevel node rounds the corners of a shape by converting them into smooth curves. It's applied on all points by default or can be selectively applied to points within a specified group parameter. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Select points to bevel. If empty, all points are affected. | | Type | The shape of the bevel. | | Amount | The distance to bevel the points. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | amount | Amount | | group | Group | | label | Label | | mode | Type | ## Visualization The Bevel node provides a live preview of the bevel effect directly in the canvas if you click Enter key hovering over viewport. This visualization provides immediate feedback on how the Amount parameter is affecting the shape. ## Examples ## Usage with Complex Shapes The Bevel node is a point-based operator, meaning it needs a structured list of points to identify the corners it should round. Nodes that procedurally generate or combine shapes—such as Boolean, Clip, Mirror (with weld), are path-based operators. They generate a new shape outline (an SVG path) but do not preserve the original point structure. As a result, connecting these nodes directly to a Bevel node will not work, as the Bevel node won't find any points to modify. To solve this, you must use a Resample node to regenerate points along the new path before beveling. --- ### Blend URL: https://animgraphlab.com/docs/nodes/blend The Blend node composites a foreground shape over a background shape using one of several common blend modes. It provides a way to achieve effects similar to layer blending in photo applications. ## Inputs The Blend node has two inputs. The order matters for how the blend is applied. Input: Foreground (FG) The geometry that will be blended on top. The Mode and Opacity parameters affect this input. Input: Background (BG) The base geometry that will appear behind the foreground. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Mode | Specifies the global compositing operation. | | Opacity | Controls the opacity of the foreground layer. | | Swap inputs | Swaps the foreground and background inputs. Useful for non-commutative blend modes. | | Morph blur radius | Blurs the combined foreground and background shapes together. Increase this to expand the reach of the morphing/fusion effect. | | Threshold | Snaps the blurred edges into a sharp, solid boundary. Combine with Morph Blur to make overlapping shapes seamlessly fuse together like liquid. | | Amount | Adjusts the pinch/thickness of the fused connection. Lower values expand the shape, higher values pinch it inward. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | alphaThreshold | Amount | | enableThreshold | Threshold | | groupBlur | Morph blur radius | | label | Label | | mode | Mode | | opacity | Opacity | | swapInputs | Swap inputs | ## Blend vs. Merge While both nodes combine inputs, they serve fundamentally different purposes. - The Merge node is for stacking and organizing. It takes multiple inputs and simply draws them on top of each other in order. It's like putting layers in a folder. - The Blend node is for color compositing. It changes how the colors of the foreground shapes visually interact with the colors of the background shapes below them. It's like changing a layer's blend mode in Photoshop. Use Merge when you want to: - Combine several separate shapes into a single stream to be transformed together. - Apply multiple properties (like a fill and a stroke) to the same shape. - Simply control the drawing order of elements without changing their colors. Use Blend when you want to: - Achieve artistic effects like Multiply, Screen, or Overlay. - Create lighting effects, glows, or complex color interactions. Rule of Thumb: If you just want to put one shape on top of another, use Merge. If you want to change how their colors mix together, use Blend. ## Blend Modes --- ### Blur URL: https://animgraphlab.com/docs/nodes/blur Blur node applies a Gaussian blur to shapes, softening edges and details. This is useful for creating shadows, glows, depth of field effects, or simulating motion. It supports two modes: - Uniform: Blurs equally in all directions. - Directional: Blurs along a specific angle, creating a motion streak effect. - Progression: Applies a gradient-like blur that changes intensity over distance. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | The group(s) to apply this blur to. | | Apply to | Choose whether to apply the blur to each shape individually or across the combined bounds of the group. | | Type | Uniform blurs equally. Directional blurs along an angle. Progressive blurs along a gradient. | | Amount | The radius/strength of the blur. | | Angle | The direction of the blur. | | Start | Start position (normalized 0-1) of the progressive blur gradient. | | End | End position (normalized 0-1) of the progressive blur gradient. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | angle | Angle | | applyTo | Apply to | | blurAmount | Amount | | end.x | X | | end.y | Y | | group | Group | | label | Label | | start.x | X | | start.y | Y | | type | Type | --- ### Boolean URL: https://animgraphlab.com/docs/nodes/boolean The Boolean node combines two vector shape inputs using add, subtract, intersect or exclusion operations, producing a single path for building complex shapes. ## Inputs The Boolean node has two distinct inputs. The order matters for the Difference (Subtract) operation. Input: Source (A) The base geometry (Set A). This is the shape or group of shapes that will be affected. Input: Cutter (B) The secondary geometry (Set B). This is the shape or group of shapes that will be used to cut, add to, or intersect with. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node in the graph. | | Operation | The boolean operation to perform between the two inputs. | | Output groups | Options for creating output groups. Default group names: "Cutter Seam", "Source Seam" | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | label | Label | | operation | Operation | | outputGroups.abSeamGroupName | A/B Seam Group | | outputGroups.baSeamGroupName | B/A Seam Group | | outputGroups.createSeamGroups | Create seam groups | ## Operations ## Output Groups The Boolean node automatically create point groups for the new edges (or "seams") created by an operation. This is incredibly powerful for applying effects like noise or bevels precisely where a cut was made. When Create Seam Groups is enabled, two groups are generated: - A/B Seam Group: Contains points on the Cutter (B) shape that form the new seam. - B/A Seam Group: Contains points on the Source (A) shape that form the new seam. ### Example Workflow Imagine using Difference to cut a notch. The new edges are automatically placed in a "Cutter Seam" group. You can then use this group in a Bevel or Noise node to affect only the cut.

1. Boolean Result

A Difference operation creates a new shape with sharp corners where the cut was made.

2. Seam Group

The node outputs a point group for the new seam (highlighted in red).

3. Apply Effect

A Bevel node targets the seam group to round only the new corners. --- ### Bounds URL: https://animgraphlab.com/docs/nodes/bounds Bounds node generates a new shape that encapsulates the input geometry. It can create the following bounding boxes: - axis-aligned (AABB). - oriented (OBB). - convex hull. - concave. > Note: Use the 'Combined' mode to create a single continuous bounding shape around an entire group of scattered or disparate shapes ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Target specific geometry. | | Mode | Generate bounds per shape or for the entire group. | | Type | Shape of the generated bounds. "Oriented" follows geometry rotation. | | Padding | Amount to expand the bounds. | | Keep Holes | Preserves and subtracts original holes from the generated bounds. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | boundsType | Type | | group | Group | | keepHoles | Keep Holes | | label | Label | | mode | Mode | | padding | Padding | --- ### Clip URL: https://animgraphlab.com/docs/nodes/clip The Clip node removes geometry that lies on one side of a virtual plane. It can operate on both points and shapes. For shapes, it performs a boolean-style subtraction, effectively cutting the shape along the plane. The clipping plane is defined by an Origin point and a Direction angle. The "above" side of the plane is the direction the normal vector (represented by the arrow in the gizmo) is pointing. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Specifies a subset of the input geometry to clip by name or pattern (*). If empty, all geometry is affected. | | Keep | Determines which side of the clipping plane to keep the geometry on. "Above" is the side pointed to by the plane's normal. | | Translate | The origin point of the clipping plane. | | Direction | The angle of the plane's normal vector, in degrees. 0° points right, 90° points up. | | Distance | Translates the plane along its normal vector by this amount. | | Resample edge | Resamples the cut edge. 0 disables resampling. | | Seam group | Outputs a point group for the vertices created along the clipping cut. | | Seam group name | Name of the group containing the cut edge points. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | createSeamGroup | Seam group | | direction | Direction | | distance | Distance | | group | Group | | keep | Keep | | label | Label | | origin.x | Translate X | | origin.y | Translate Y | | resample | Resample edge | | seamGroupName | Seam group name | --- ### Color URL: https://animgraphlab.com/docs/nodes/color The Color node is a property node that applies color to incoming shapes. It can operate in two modes: - Single color to apply one color to all shapes. - Color range to distribute a gradient across multiple shapes. When a shape is connected, this node adds a new Fill and/or Stroke layer to it. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Apply the color only to shapes in this group. | | Mode | Choose to apply a single color or a range of colors across shapes. | | Range mapped by | How the color range is distributed across shapes | | Range Value | Drive the color range using an expression like =@weight | | Reverse range | Apply color range from last to first shape. | | Apply fill | Enable or disable applying the fill color. | | Fill | The solid color to apply as a fill. | | Fill Stops | The colors and positions for the fill range. | | Apply Stroke | Enable or disable applying the stroke color. | | Stroke | The solid color to apply as a stroke. | | Stroke Stops | The colors and positions for the stroke range. | | Blend Mode | Controls how the new layer blends with layers below it. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | applyFill | Apply fill | | applyStroke | Apply Stroke | | blendMode | Blend Mode | | colorMode | Mode | | fillColor | Fill | | fillColorStops | Fill Stops | | group | Group | | label | Label | | rangeDriver | Range Value | | rangeMode | Range mapped by | | reverseRange | Reverse range | | strokeColor | Stroke | | strokeColorStops | Stroke Stops | ## Color range mode When Mode is set to Color Range, the node distributes a gradient from the start color (Fill or Stroke) to the End Fill or End Stroke color across all incoming shapes. This is useful for coloring copies from a Copy/Transform or Copy to Points node. The gradient is applied based on the order (index) of the shapes. The first shape gets the start color, and the last shape gets the end color. You can flip this order by enabling the Reverse Range toggle. --- ### Controller URL: https://animgraphlab.com/docs/nodes/controller Controller node acts as a "remote control" for graph. It allows to build a custom interface composed of any input that will target specific parameters on nodes. This is useful if you have a complex graph and you want to manage multiple parameters from a single location without hunting through dozens of individual nodes. Other nodes reference the Controller's values using expressions. > Note: You can create multiple controllers. You can promote a parameter multiple times to different controllers, but the last promotion will overwrite the expression on the source node. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Controls | List of custom parameters. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | _controls | Controls | | label | Label | ## Promoting parameters The only way to add new parameter to Controller node is to "promote" it from parameters panel on target node. This automatically creates the control, gets existing value from parameter (or default), and creates the expression link. - Select any node in your graph. - Right-click the parameter you want to control (like Width in the Parameters panel). - Select "promote to controller". - Choose "create new controller" to generate a new node, or select an existing Controller from the list. > Note: When Controller node is selected, dashed reference lines will appear in the graph to every node that uses its values, helping to visualize dependencies. If not, enable in Nodegraph menubar: View > Show reference lines > Note: You can do math operations expression to a linked parameter. For example, if you promote a 'Scale' parameter, you can edit the expression to '=ref('controller1', 'scale') * 2' to double the effect. ## Editing and organizing Once controls are created via promotion, you can rename them, adjust their ranges, or organize them into collapsable folders. - Enter edit mode: Click icon. - Organize: Add folders: Click icon to create groups. - Reorder: Drag controls using handle to reorder them or move them into/out of folders. - Configure controls: Rename: Change the label of any control (rename "width" to "Master Scale"). - Limits: For number input, set the Min, Max, and Step values to constrain the input range. - Delete: Remove controls that are no longer needed by clicking on icon. - Exit edit mode: Click icon to save changes. ### Promoting attribute randomize groups When promoting parameters from an Attribute Randomize node (specifically the attribute list items), the Controller detects the related Min, Max, and Seed values and groups them into a single "Range" control. This keeps interface tidy while giving you full control over the randomization boundaries. > Note: Deleting a control or folder from a Controller will automatically remove the reference expressions from any linked nodes to prevent errors. Target node(s) will revert to safe default values. --- ### Copy and transform URL: https://animgraphlab.com/docs/nodes/copy-and-transform The Copy and Transform node creates duplicates of the input geometry and applies a sequence of transformations to each new copy. This is a powerful tool for creating procedural patterns, arrays, and complex arrangements from simple shapes. The original geometry is included in the Total Number count and is not transformed. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Output mode | Determines if the output is multiple individual shapes or a single combined path. | | Distribution | How copies are arranged. | | Total number | The total number of objects, including the original. | | Columns | Number of columns for grid layout. Set to 1 for a single line. | | Translate | Translation step per item (or column). | | Row Translate | Translation step per new row. | | Radius | Radius of the circle. | | Start angle | Starting angle of the arc. | | Total angle | Total angle of the arc. | | Align rotation | Rotate copies to face the direction of the circle curvature. | | Rotate | Rotation applied to each copy. | | Scale | Scale applied to each copy. | | Uniform scale | A uniform multiplier for the scale. | | Pivot | The pivot point for scaling and rotation. | | Accumulate scale | If enabled, scaling affects the position of subsequent copies (Spiral/Fractal). If disabled, scaling happens in-place (Random/Grid). | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | accumulateScale | Accumulate scale | | alignRotation | Align rotation | | columns | Columns | | distribution | Distribution | | label | Label | | outputMode | Output mode | | pivot.x | Translate X | | pivot.y | Translate Y | | radius | Radius | | rotate | Rotate | | rowTranslate.x | Translate X | | rowTranslate.y | Translate Y | | scale.x | Scale X | | scale.y | Scale Y | | startAngle | Start angle | | totalAngle | Total angle | | totalNumber | Total number | | translate.x | Translate X | | translate.y | Translate Y | | uniformScale | Uniform scale | ## How It Works The node operates by applying the specified Translate, Rotate, and Scale values cumulatively. This means each copy is transformed relative to the previous copy, not the original. For example, if you set Translate X to 10 and Rotate to 5: - Copy 1 will be translated 10 units in X and rotated 5 degrees. - Copy 2 will be translated another 10 units and rotated another 5 degrees from Copy 1's position. - Copy 3 will be transformed relative to Copy 2, and so on. The order of operations for each step is: Scale, then Rotate, then Translate. Both scaling and rotation occur around the specified Pivot point. ### Copy Number Attribute The Copy Number Attribute parameter allows you to store the index of each copy in a primitive attribute. The original geometry is copy 0, the first copy is 1, and so on. This attribute can be used in downstream expressions to create variations. For example, you could use an expression to change the color of copies based on their copyNum. --- ### Copy to points URL: https://animgraphlab.com/docs/nodes/copy-to-points Copy to Points node is a powerful tool for copying shapes onto target points. It takes one or more shapes and creates a copy of them at the location of each point from a target geometry. For example, you can arrange copies in a circular shape by copying them onto the points of an ellipse, or scatter points across a surface and copy shapes onto those points. ## Inputs Input: Shape to Copy The shape or group of shapes that will be copied. Input: Target Points The points output from from a Scatter node that will be used as the target locations for the copies. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Target group | Filter target points by group to copy shapes onto. If empty, all points are used. | | Mode | Determines which shape to copy to each point. | | Seed | A random seed for weighted selection. | | Use point attributes | Rotates and scales copies based on target point attributes (tangent, pscale, rotation). | | Attribute injection | Map point attributes to specific shape properties. | | Output mode | Controls how copies are output. "Individual" creates separate shapes. "Combined" creates one merged path. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | attributeTargets | Attribute injection | | group | Target group | | label | Label | | mode | Mode | | outputMode | Output mode | | seed | Seed | | transformUsingPointAttributes | Use point attributes | ## How It Works The node follows a simple three-step process to generate its output: ## Output Modes The Output Mode parameter provides three different methods for generating the copies, each with its own performance characteristics and limitations. Choosing the right mode is key to building efficient graphs. ## Using Point Attributes The Use Point Attributes toggle allows for powerful variation between copies. When enabled, the node looks for specific attributes on the target points to customize each copy: - position: (Vector) The location where the copy will be placed. This is always used. - tangent: (Vector) A direction vector used to orient the copy. The copy will be rotated to align with this direction. This is generated by nodes like Scatter (in outline mode) and Resample. - pscale: (Number) A uniform scale multiplier applied to the copy. A value of 1 is the original size, 0.5 is half size, and 2 is double size. - rotation: (Number) An additional rotation in degrees that is added to the orientation from the tangent. - color: (String) A hex color code (e.g., #ff0000) that can override the fill color of an instance when using the "Instanced Shapes" output mode. --- ### Delete URL: https://animgraphlab.com/docs/nodes/delete Delete node removes shapes/points. It uses a Group name to target shapes or points for deletion. > Note: If you want to separate geometry into two branches instead of deleting it, use Split node insitead. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Group of items to delete. Result of Group node. | | Group Type | Whether to delete whole shapes or individual points. | | Delete unselected | If enabled, deletes everything NOT in the group. | | Heal gaps | Connects the neighbors of deleted points to maintain a closed shape. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | group | Group | | groupType | Group Type | | heal | Heal gaps | | invert | Delete unselected | | label | Label | ## Usage

Deleting Shapes

By default, the Delete node operates in Shape mode. This is useful for cleaning up a complex scene or removing temporary shapes. Example: - Connect a stream containing multiple shapes from a Merge node. - Use a Group node upstream to define a selection (name it "trash" or however your want). - In the Delete node, enter "trash" or use auto suggested group name in the Group parameter. - The shapes in the "trash" group will be removed.

Deleting Points

When set to Points, the node removes individual vertices from within a shape. - Result: If points are removed from a path or shape, the geometry is reconstructed by connecting the remaining points. Can look manifolded (weird). - Point Cloud: If the input is a Point Cloud (from a Scatter node), the specific points are simply removed. > Note: If you want to remove points within point cloud, use mask input on Scatter node by inserting whatever shape you want.

Invert Selection

The Delete Unselected toggle flips the operation: - Off (Default): Deletes items inside the specified group. - On: Deletes everything except the items in the specified group. --- ### Donut URL: https://animgraphlab.com/docs/nodes/donut Donut node creates a ring shape. It consists of two concentric circles: an outer circle and an inner hole. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Translate | Sets the X and Y coordinates of the shape's center. | | Outer radius | The outer radius of the donut. | | Inner radius | The inner radius of the donut, creating the hole. | | Scale | Scales the shape from its center. | | Rotation | Rotates the shape around its center. | | Blur | Applies a Gaussian blur effect to the shape. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | blur | Blur | | innerRadius | Inner radius | | label | Label | | layers | Layers | | outerRadius | Outer radius | | position.x | Translate X | | position.y | Translate Y | | rotation | Rotation | | scale | Scale | --- ### Edge cutter URL: https://animgraphlab.com/docs/ui/nodegraph/edge-cutter Edge Cutter is quality-of-life feature designed to speed up workflow for quick deletion of one or more edges in the nodegraph. Instead of selecting and deleting edges individually, you can activate the cutter and simply draw a line through the connections you want to remove. ## How to use - Activate the Tool: Press and hold Alt Shift C. Your cursor will change to a scissors icon and normal graph interactions like panning and selecting will be disabled. - Cut Edges: Click and drag your mouse across the edges you wish to delete. A red trail will appear, and any edge that intersects with your path will be highlighted in red. - Confirm Deletion: Release the mouse button. All highlighted edges will be permanently deleted. - Deactivate the Tool: Release Alt Shift C to return to the normal interaction mode. ## Shortcuts | Description | Shortcut | | --- | --- | | Quick Add Artboard | Hold A + Click | | Quick Add Rectangle | Hold R + Click | | Quick Add Circle | Hold C + Click | | Quick Add Star | Hold S + Click | | Quick Add Transform | Hold T + Click | | Quick Add Merge | Hold V + Click | | Quick Add Null | Hold X + Click | | Quick Add Group | Hold G + Click | | Quick Add Blur | Hold B + Click | | Quick Add Delete | Hold D + Click | | Quick Add Color | Hold F + Click | | Select all nodes | Ctrl+A | | Pan the node graph view | MMB Drag | | Add or remove single nodes from selection | Ctrl+LMB | | Add nodes to selection with a selection box | Shift+Drag | | Remove a single node from selection | Alt+LMB | | Remove nodes from selection with a selection box | Alt+Drag | | Add reroute point to an edge | Alt+LMB | | Group selected nodes into a network box | Shift+O | | Add a sticky note at the cursor position | Shift+N | | Convert selected nodes to a subnet | Shift+C | | Open the node search menu | Tab | | Toggle disable on selected node | Q | | Set selected node as render output | R | | Toggle preview on selected node | E | | Toggle render target ghost view | W | | Toggle outline rendering mode | Shift+W | | Fit view to all nodes | Shift+F | | Fit view to selected node(s) | F | | Find node in graph | Ctrl+F | | Toggle list view | Ctrl+L | | Toggle node graph fullscreen | Ctrl+Shift+F | | Toggle the color palette | Alt+C | | Toggle the edge cutter tool | Shift+Alt+C | | Copy selected node(s) | Ctrl+C | | Paste copied node(s) | Ctrl+V | | Undo last action | Ctrl+Z | | Redo last action | Ctrl+Shift+Z | | Toggle geometry spreadsheet | Shift+S | | Save a quickmark (1-9) | Ctrl+1-9 | | Recall a quickmark (1-9) | 1-9 | --- ### Ellipse URL: https://animgraphlab.com/docs/nodes/ellipse Ellipse node generates a vector ellipse shape. By setting the X and Y radius to the same value, you can create a perfect circle. It serves as a fundamental building block for more complex designs. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Translate | Sets the X and Y coordinates of the shape's center. | | Radius X | The horizontal radius of the ellipse. | | Radius Y | The vertical radius of the ellipse. | | Scale | Scales the shape from its center. | | Rotation | Rotates the shape around its center. | | Blur | Applies a Gaussian blur effect to the shape. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | blur | Blur | | label | Label | | layers | Layers | | position.x | Translate X | | position.y | Translate Y | | radiusX | Radius X | | radiusY | Radius Y | | rotation | Rotation | | scale | Scale | --- ### Export URL: https://animgraphlab.com/docs/nodes/export Export node is the final step in the graph, responsible for rendering the visual output from an upstream Artboard node and saving it as an image file. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | File Name | The name of the output file, without extension. | | Format | The output file format. | | Format | The output file format. | | Quality | Compression quality for raster formats and video bitrate. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | _hasAnimation | _has Animation | | fileName | File Name | | format | Format | | formatAnimated | Format | | label | Label | | paramError | Param Error | | quality | Quality | ## Usage To use Export node, you must connect an Artboard node to its input. Artboard defines the dimensions, position, and background of the final render. > Note: if no Artboard is connected, Export node will display an error. Once connected, Parameters Panel for Export node will show a live preview of the output, an estimated file size, and an Export button. ## Supported formats The Export node supports the following image formats: - SVG: A vector format that preserves scalability. Ideal for graphics that need to be resized without quality loss. - PNG: A lossless raster format that supports transparency. Best for graphics with sharp lines or text. - JPG: A lossy raster format that offers good compression for photographic images. Does not support transparency. - WEBP: A modern raster format that offers excellent lossy and lossless compression, as well as transparency. When JPG or WEBP is selected, a Quality slider will appear, allowing you to control the compression level and file size. --- ### Exported SVG Structure URL: https://animgraphlab.com/docs/export/exported-svg-structure Generated SVG tries to be as clean and standard-compliant as possible, without relying on proprietary XML namespaces. To support complex effects, animations, and state machines within a single file, the exported SVG follows a specific structural pattern. ## Document tree The final exported SVG follows this exact top-to-bottom hierarchy: ## IDs and Minification During export, exporter runs an ID Minifier to reduce file size. Internal application IDs like shape-rect123-g-fill are minified into short base52 strings like a, b, c. > Note: If you are parsing the SVG with an external script, do not rely on element IDs matching your node names unless you are reading the reverse-map from the animation payload. ## Shape rendering rules To maximize compatibility across browsers and vector tools, exporter applies the following rules when generating geometry: - Flattened geometry: basic shapes (Rectangles, Ellipses, Stars, Text) are exported as standard <path d="..."> elements, not <rect>, <polygon>, <ellipse>, or <text>. Because each shape is generated procedurally, they pass through nodes (like noise, booleans, point resampling, bend, light, blend, mask, etc). Basic SVG tags cannot physically represent these complex mathematical changes. Baking to paths guarantees complex geometry (like corner radii) renders 1:1 in any browser exactly as it does on the canvas without standard SVG quirks. Furthermore, converting text to paths ensures exact kerning, fonts, and layouts everywhere, even if the end-user doesn't have the font installed. - Layer separation: if a shape has both a Fill and a Stroke, and it doesn't require complex blending, they are combined into a single <path>. However, if the shape uses inner shadows, progressive blurs, or outside-aligned strokes, the engine splits the shape into multiple stacked <path> elements. - Isolation groups: shapes that use Gooey effects (Threshold filters) are wrapped in a <g style="isolation: isolate"> tag. - Direct rendering: exporter does not use <use> tags to instance shapes. All visual shapes are drawn directly in the document body as full <path> nodes inside their respective Artboard wrappers. <defs> is strictly reserved for gradients, clipping paths, filters, etc. ## Animation & State machine payload If the file was exported as an Animated SVG or Interactive SVG, all animation data is completely decoupled from the SVG DOM. You will not find standard SMIL tags (<animate>, <animateTransform>) or CSS @keyframes in the file. An embedded SVG runtime engine is used because SMIL has several technical limitations: - SMIL path morphing completely breaks if the start and end shapes have a different point count. - SMIL cannot animate changing text strings. - SMIL cannot calculate smooth crossfades if a user interrupts an interaction. - SMIL cannot control an entire graph - the custom runtime allows triggering and syncing 50 different shapes from a single interaction. Instead, the data is bundled into a compressed, baked JSON payload.

#ag-data block

At the bottom of the file, <script type="application/json" id="ag-data"> tag is located. Inside is a Base64-encoded, Deflate-compressed JSON string. By decompressing this payload, you will find: - fps: target framerate. - clips: a dictionary of animation clips. Each clip contains Run-Length Encoded (RLE) arrays of attribute values (e.g., ["#ff0000", 10, "#00ff00", 5] meaning 10 frames of red, 5 frames of green). - sm: the State Machine graph (nodes, edges, and variables). - reverseIdMap: a dictionary mapping the minified DOM IDs (e.g., a) back to their original node IDs. ## Runtime script Directly below data payload is a standard JavaScript block. When SVG is opened in a browser, this script: - Decompresses JSON payload using browser's native DecompressionStream API. - Starts a requestAnimationFrame loop. - Calculates current state, crossfades, and frame indices. - Directly mutates DOM using element.setAttribute(...). ## Web integration While static SVGs can be embedded using a standard <img> tag, Interactive and Animated SVGs require script execution to run the payload mentioned above. Because browsers block JavaScript execution inside <img> tags for security reasons, you must embed the exported SVG using an <object> or <iframe> tag to ensure the animation plays correctly. --- ### Expressions URL: https://animgraphlab.com/docs/ui/parameters-panel/expressions Expressions allow you to use mathematical formulas and functions to drive parameter values, creating dynamic and procedural effects. Instead of a static number, you can use a live formula that responds to time, animation frames, or other parameters. To use an expression, right-click a parameter and select "Edit Expression". ## Globals You can use the following global values in any expression: - time(): Returns the current animation time in seconds. - frame(): Returns the current animation frame number. ## Referencing Parameters There are two ways to reference other parameters: self for internal references (on the same node) and ref() for external references (on other nodes). The system automatically enforces this rule to ensure clarity and prevent errors. ### The Golden Rule of Referencing The application automatically chooses the correct syntax for you when you copy and paste parameter references. This ensures that expressions are always clear and presets are always portable.
If you are referencing... The syntax will use...
A parameter on the same node self.parameterName
A parameter on a different node ref('other_node_id', 'parameterName')
### The self Object Use the self object to create relationships between a node's own properties. The autocomplete menu will show all available properties when you type self. Example: To make a rectangle's height always be half of its width: =self.width * 0.5 ### The ref() Function Use the ref() function to link a parameter to a value on a different node. It takes two arguments: the ID of the source node and a string path to the source parameter. Example: To link a rectangle's width to a circle's radius: =ref('circle_node_id', 'radius') * 2 ## Working with Data Types ### Integers The expression engine supports more than just numbers. You can also manipulate strings and colors. ### Strings ### Colors ## Function Reference The following is a complete list of all built-in functions available in the expression engine. --- ### Extract center URL: https://animgraphlab.com/docs/nodes/extract-center Extract Center node converts input shapes into Point clouds containing a single point per shape. Unlike a simple centroid calculation, this node allows you to choose specific anchor locations relative to the shape's bounding box, such as corners or edge midpoints. It preserves the input shape's attributes (like rotation and custom data) on the generated points. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | The group of shapes to extract points from. If empty, all shapes are used. | | Offset | Offset position from the calculated anchor point | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | group | Group | | label | Label | | offset.x | X | | offset.y | Y | | placement | Placement | ## Placement options Determines where the point is generated relative to the input shape's bounding box. --- ### Extrude 3D URL: https://animgraphlab.com/docs/nodes/extrude Extrude 3D node creates a pseudo 3D SVG shape with simulated lighting. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Select shapes to extrude. Supports wildcard (*). | | Preset | Applies standard isometric or off-axis rotations. | | Depth | Depth of the extrusion. | | Rotate X | Rotation around X axis. | | Rotate Y | Rotation around Y axis. | | Rotate Z | Rotation around Z axis. | | Perspective | Perspective intensity. 0 is Orthographic. | | Fidelity | Number of segments to approximate curves. | | Light Angle | Horizontal angle of the light source. | | Light Height | Vertical angle of the light source. | | Output groups | Groups to target specific faces (Front, Back, Sides, Top, Bottom, Left, Right). | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | depth | Depth | | fidelity | Fidelity | | group | Group | | label | Label | | lightAzimuth | Light Angle | | lightElevation | Light Height | | outputGroups.backGroupName | Back | | outputGroups.bottomGroupName | Bottom | | outputGroups.createFaceGroups | Create face groups | | outputGroups.frontGroupName | Front | | outputGroups.leftGroupName | Left | | outputGroups.rightGroupName | Right | | outputGroups.sideGroupName | Side (All) | | outputGroups.topGroupName | Top | | perspective | Perspective | | preset | Preset | | rotateX | Rotate X | | rotateY | Rotate Y | | rotateZ | Rotate Z | --- ### Falloff URL: https://animgraphlab.com/docs/nodes/falloff Falloff node generates a spatial field (Radial or Linear). It calculates the distance of incoming shapes or points from its center and writes a normalized value (0 to 1) into a custom attribute weight. This weight attribute can then be read by downstream nodes like the Transform to procedurally animate scale, rotation, and translation based on proximity. Remap parameter allows to alter the contour curve of the falloff to optionally make things bounce, step, or ease smoothly. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name of the node. | | Attribute | Writes normalized 0-1 falloff value to this attribute key | | Remap | Remap the falloff value | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | angle | Angle | | attributeName | Attribute | | innerRadius | Inner Radius | | label | Label | | outerRadius | Outer Radius | | position.x | Translate X | | position.y | Translate Y | | ramp | Remap | | shape | Shape | --- ### Free tier limits URL: https://animgraphlab.com/docs/ui/free-tier-limits ## Free plan limits --- ### Freeform gradient URL: https://animgraphlab.com/docs/nodes/freeform-gradient Freeform gradient node creates a complex, mesh-like color blend. Unlike linear or radial gradients, it allows to place multiple color points arbitrarily within the shape's bounding box. Each point has a specific position, color, and radius. This is useful for creating organic, multicolored backgrounds, abstract blobs, or complex lighting effects. > Note: select Freeform Gradient node, hover over canvas and press Enter key to activate gizmo for interactive controls. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | The group to apply this gradient to. | | Target | The layer type to apply the gradient to. | | Base Color | The background color of the mesh gradient. | | Color points | The colors and positions in the mesh gradient. | | Smoothing | Controls the global smoothing of the color points blend together. | | Blend mode | Controls how the gradient blends with layers below it. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | baseColor | Base Color | | blendMode | Blend mode | | gradientPoints | Color points | | group | Group | | label | Label | | smoothing | Smoothing | | targetLayer | Target | --- ### Graphs as components URL: https://animgraphlab.com/docs/animation/state-machine/components In most animation tools, logic is attached to individual layers. In AnimGraphLab, logic is attached to Graphs. This approach allows to build complex, reusable interactive components (like buttons, sliders, and toggles) that behave as a single, self-contained unit. ## Hierarchy There are two places where a State Machine can live: - Root graph: main "Scene". Logic built here controls the entire project. - Subnets: subnet is a node that contains its own internal graph. When you "Dive In" to a Subnet, you are editing a self-contained Component. ## The "One Way" rule To keep your projects organized and scalable, follow this rule: Nodes hold artwork and keyframes. Graphs hold Animation Clips and the State Machine. When the State Machine plays a clip named Hover it isn't telling a specific node to move, it's telling the entire Graph to move to that specific time range. Any node that has keyframes inside that range will animate in sync automatically. ## Variable scope Variables are local to the graph they belong to. If you build a "Button" inside a Subnet and create a variable called isHovered, that variable only exists inside that Subnet. If you drag 10 buttons onto your main canvas, they each have their own independent isHovered state. They won't interfere with each other. > Note: this is designed for reusability. By keeping logic encapsulated inside Subnets, you can build a rich library of interactive parts and reuse them anywhere in your projects. --- ### Group URL: https://animgraphlab.com/docs/nodes/group Group node allows to create selections of shapes/points. These groups can be targeted by other nodes, like Transform or Color downstream, to apply modifications to a subset of geometry. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group name | The name used to reference this group. | | Base group | Optional existing group to merge with. If empty, uses Group name. | | Operation | How to resolve collisions with an existing group. | | Group | Specifies a subset of items to affect. Use commas to separate multiple patterns. Supports wildcards (*, ?). | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | baseGroup | Base group | | group | Group | | groupName | Group name | | label | Label | | mergeOp | Operation | ## Group types ### Manual selection Allows to use a selection tool on the canvas to manually pick entire shapes or individual points on a path. Use Shift+Drag to add to your selection and Alt+Drag to remove from it. ### Pattern Selects shapes based on a name-matching pattern or index. The following special characters can be used:
Pattern Description
* Wildcard. Matches any number of characters (leg*).
^ Exclusion. Placed at the start to exclude matching items (* ^leg_foot).
, Separator. Used to combine multiple patterns (Circle 1, Star 1).
### Bounding box Selects any shapes or points that fall within a defined rectangular area. - Match bounds: automatically sizes the selection box to fit all incoming geometry. - Partial selection: when enabled, shapes that only partially intersect the box boundaries will be included. You can connect any shape (like a Rectangle or Circle) into the Group node's secondary Driver input. When connected, bounding box mode will automatically use the dimensions and position of that driver shape to make the selection. ### Percent Selects a specified percentage of the total incoming shapes or points. Control the origin of the selection using the Mode dropdown: - From start: selects the first X%. - From end: selects the last X%. - From center: selects the middle X%. ### Random selection Works on a point-by-point or shape-by-shape basis. It selects items randomly based on a Seed and a Probability value (0 to 1). ### Color match Selects shapes based on their HEX color. You can target shapes Fill, Stroke or both. - Target color: HEX base color to compare against. - Tolerances: Adjustable thresholds for Hue, Saturation, and Value. Increasing these allows for selecting ranges of similar colors (e.g., selecting all shades of "Red"). --- ### Group expand URL: https://animgraphlab.com/docs/nodes/group-expand Group Expand node allows to grow or shrink a selection. It works by looking at the neighbors of selected group items and adds them to the group or removing boundary items from the group. This node operates on shapes or points. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | The original group to expand or shrink. | | Replace Original | If enabled, the result will replace the original group definition. | | New group Nnme | The name for the new expanded group definition. | | Type | Expand selection across points or whole shapes. | | Steps | Positive values expand, negative values shrink. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | group | Group | | groupName | New group Nnme | | label | Label | | replaceOriginal | Replace Original | | steps | Steps | | type | Type | ## Key features ### Expansion types - Points: For Paths: Points connected by edges are considered neighbors. - For Point clouds/Shapes: finds the nearest unselected point to every selected point. - Shapes: Treats entire shapes as atomic units and finds the nearest unselected shape. ### Steps The Steps parameter controls the magnitude and direction of the operation: - Positive values: Expand the group. Each step adds one "layer" of neighbors. - Negative values: Shrink the group. Each step removes the outer "layer" of the selection. - Zero: No change. Result will be same as in incoming group. ### Replacing groups Just like Group Invert, you can choose to overwrite the original group definition in-place. - Enabled: The output group has the same name as the input group, effectively updating/overriding it. - Disabled: A new group name is created containing the expanded selection. --- ### Group invert URL: https://animgraphlab.com/docs/nodes/group-invert Group Invert node allows to create a selection based on exclusion. It takes an existing group pattern and creates a new group (if preffered) containing all geometry that is not part of that input group. For example, if you have a group selecting the "top" points of a shape, Group Invert can automatically create a group for the "bottom" points without manual selection. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group to invert | The group pattern to invert. Items NOT in this group will be selected. | | Replace original | If enabled, the inverted group will replace the original group definition using the same name. | | New group name | The name for the new inverted group definition. | | Selection Mode | Determines whether to preview and treat the resulting group as shapes or points. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | group | Group to invert | | groupName | New group name | | label | Label | | replaceOriginal | Replace original | | selectMode | Selection Mode | ## Key features ### Selection modes The node operates in two distinct modes depending on what kind of data you want to capture: - Shapes: Inverts the selection at the shapes level. If a shape is fully excluded by the input group, it is ignored. Any shape not in the input group becomes part of the new group. - Points: Inverts the selection at the point level. It looks at every point in every shape. If a point is in the input group, it is excluded. All other points are included in the new group. ### Replacing groups By enabling the Replace Original toggle, you can update a group definition in-place. - Disabled (default): Creates a brand new group with the name specified in New Group Name. The original group remains available for use downstream. - Enabled: The new inverted selection is assigned the same name as the input Group to Invert. This effectively overwrites the original group definition for all nodes connected after this one. --- ### Hatch URL: https://animgraphlab.com/docs/nodes/hatch Hatch node takes an input shape and fills its interior with repeating lines. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | The group(s) to apply this hatch to. | | Output mode | Controls how hatches are output. | | Type | Style of hatching to generate. | | Angle | Base angle of the lines. | | Spacing mode | Control how line spacing is applied. | | Spacing | Minimum/base distance between lines. | | Max spacing | Maximum distance between lines at the end of the gradient. | | Grad start | Gradient start. | | Grad end | Gradient end. | | Dash length | Base length of the short dashes. | | Offset | Phase offset for animating the lines. | | Thickness | Thickness of the lines. | | Color | Color of the lines. | | Use shape color | Inherit color from the original shape. | | Keep original | Keep the original shapes behind the hatch. | | Angle jitter | Randomizes the angle of each line. | | Spacing jitter | Randomizes the distance between lines. | | Dash length jitter | Randomizes the length of each short dash. | | Waviness | Adds hand-drawn like wobblenes to the lines. | | Wave freq | Frequency of the wobble. | | Resample | Determines how detailed lines are. Lower value = more detailed, higher value = less detailed. | | Seed | Random seed for irregular effects. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | angle | Angle | | angleJitter | Angle jitter | | color | Color | | dashLength | Dash length | | dashLengthJitter | Dash length jitter | | gradientEnd.x | X | | gradientEnd.y | Y | | gradientStart.x | X | | gradientStart.y | Y | | group | Group | | hatchType | Type | | keepOriginal | Keep original | | label | Label | | maxSpacing | Max spacing | | offset | Offset | | outputMode | Output mode | | resample | Resample | | seed | Seed | | spacing | Spacing | | spacingJitter | Spacing jitter | | spacingMode | Spacing mode | | thickness | Thickness | | useShapeColor | Use shape color | | waveFrequency | Wave freq | | waviness | Waviness | ## Hatch types - Hatch: standard parallel straight lines. - Crosshatch: two sets of intersecting parallel lines (offset by 90 degrees). - Zigzag: continuous angular lines moving back and forth. - Scribble: organic, noisy looping lines that simulate hand-drawn scribbles or chaotic filling. - Short dashes: broken parallel lines simulating pencil shading with short strokes. - Stamping: stippling effect using scattered dots instead of lines. ## Adding organic feel Jitter and wave parameters can be used to create a hand-drawn like look: - Angle jitter: rotates individual lines slightly. - Spacing jitter: randomizes the gap between lines. - Waviness: applies a noise distortion along the length of each line. - Wave frequency: controls how tight the noise waves are. > Note: To achieve more organic and complex look, create several Hatch nodes and merge them together. ## Output mode - Individual shapes: every generated line remains an independent shape in the graph. - Combined shape: merges all generated lines into a single, unified SVG path. Can be used after Copy/Transform, or after Copy to Points node. In other words, after applying hatching to multiple shapes. --- ### Import URL: https://animgraphlab.com/docs/nodes/import The Import node acts as a container for external media assets. You can import vector graphics (SVG), raster images (PNG, JPG). Once imported, the asset is treated like any other shape You can connect it to Transform, Color, or other property nodes to manipulate its position, scale, rotation, and appearance. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node in the graph. | | Source file | Import an image from your computer. | | Source URL | Paste an image URL to import from the web. | | Translate | Moves the imported content in X and Y direction. | | Size | Controls the size of the content. | | Scale | Scales the content from its center. | | Rotation | Rotates the content around its center. | | Opacity | Controls the transparency of the content. | | Blur | Applies a Gaussian blur effect to the content. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | blur | Blur | | fileName | File Name | | isCsv | Is Csv | | isSvg | Is Svg | | label | Label | | opacity | Opacity | | originalHeight | Original Height | | originalWidth | Original Width | | position.x | Translate X | | position.y | Translate Y | | rotation | Rotation | | scale.x | Scale X | | scale.y | Scale Y | | size.height | Height | | size.width | Width | | sizeLinked | Size Linked | | sourceFile | Source file | | sourceUrl | Source URL | | src | Src | ## Usage To use the Import node, click the "Source" button on the node's parameters panel. This will open a file dialog, allowing you to select a file from your computer. - Vector Images (SVG): Imported SVGs are rendered as vector graphics, preserving their scalability and original appearance. - Raster Images (PNG, JPG, WEPB): Standard image formats are imported as raster graphics. ## File Handling and Portability To make projects self-contained and portable, most imported files are embedded directly into your project file. This means you can delete the original file from your computer, and it will still be available in your project. Yay!
File Type How It's Handled
Images (PNG, JPG, WEBP) Embedded directly into the project file as data. The original file is no longer needed.
SVG The full SVG code is embedded into the project file. The original file is no longer needed.
--- ### Interactive states URL: https://animgraphlab.com/docs/animation/state-machine/interactive-states Interactive animations respond to a user's mouse or touch. By organizing your logic at the Graph level, you can coordinate multiple shapes (backgrounds, icons, text) to react simultaneously to a single trigger. ## Animation clips In an interactive project, you don't play one long timeline. Instead, you play Clips — named time ranges that represent specific actions. How to create them: at the very top of the Timeline or Dope Sheet, click and drag in the empty area above the ruler. This creates a Clip block. - Idle clip: usually a single frame where shapes are in their resting position. - Action clip: a range of frames where shapes move, change color, or scale. ## Chronological timeline In timeline-based state machines, it is highly recommended to place your clips on the global timeline in the logical order of expansion so that un-keyed values naturally "hold". Because animation engine looks backwards down the timeline to find the last known keyframe, placing your clips chronologically ensures that looping states naturally inherit correct sizes and positions. Example timeline order: - Idle (Frames 0-10) - Hover in (Frames 20-30) — Circle expands - Hover noise (Frames 40-50) — Circle wobbles (looping) - Hover out (Frames 60-70) — Circle shrinks If Hover noise was placed before Hover in on the timeline, the circle would suddenly shrink during the noise loop. The engine would look backwards from frame 40, miss the expanded keyframes at frame 30, and find the tiny circle from the Idle state at frame 10. > Note: Always build your timeline left-to-right in the order the user experiences it. ## Multi-node choreography Because Clips belong to the Graph, not the node, you can animate many things at once: - Select Rectangle 1 and animate its scale at Frame 10. - Select Text 1 and animate its opacity at Frame 10. - Create a Clip from Frame 0 to 10 named "Activate." - When the State Machine plays "Activate", both the rectangle and the text will animate in perfect sync. ## Crossfade blending When Wait for animation to finish on a transition is unchecked, State Machine instantly jumps to the target state the moment the condition is met. However, if an animation is interrupted (e.g., moving the mouse away before a button fully grows), jumping straight to the start of the exit animation causes a harsh, instantaneous "snap". Crossfade blending solves this by automatically calculating the values of the animation you are leaving and smoothly mixing (lerping) them with the new animation over a defined number of frames. How to use it: - Select any Transition Line (arrow) in the State Machine. - In the Properties panel, find the Crossfade (frames) input. - Set it to a short duration (5 to 10 frames). - Ensure Wait animation to finish is unchecked. Now, transition will have smooth blend from its interrupted state into the new one, making UI feel much more responsive. ## Example: Hover effect Animation clips: - Idle: Frame 0 (Static). - In: Frames 1–10 (Growing). - Out: Frames 11–20 (Shrinking). States: Create three states: Rest, Hover In, and Hover Out. Wiring: > Note: Always use a 'Hitbox' a simple transparent rectangle as your interaction target. This ensures the hover doesn't 'flicker' if the mouse moves over a gap in your artwork. ## Interaction cheatsheet Built-in variables track the Identity of the shape being interacted with. - hover: Persistent. Returns the Label/ID while the mouse is over. - click: Transient. Fires once when a click is finished. - pointerdown: Persistent. Active as long as the mouse is held down. > Note: Check the graphs as components page to learn how to isolate these interactions inside Subnets so they don't conflict in large projects. --- ### Interpolate URL: https://animgraphlab.com/docs/nodes/interpolate Interpolate node generates intermediate steps between two or more shapes, creating a geometry blend effect. Not to confuse with Blend node that blends between shape styles (color/gradient). ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Steps | Number of intermediate shapes between each target. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | easing | Easing | | includeEnds | Include Ends | | label | Label | | steps | Steps | ## Usage ## Blending between shapes - Connect two or more shape nodes to the node input. - Adjust Input order list to define the sequence of morphing (e.g., Shape A -> Shape B -> Shape C). - Adjust Steps parameter to control how many intermediate shapes are generated. ## Easing - Linear: Even spacing between steps. - Ease In/Out: Concentrates steps at the beginning or end of the transition, creating an acceleration or deceleration effect. --- ### Keyboard shortcuts URL: https://animgraphlab.com/docs/ui/shortcuts Ctrl+F {#if filteredGlobalKeys.length > 0} ## Global | Description | Shortcut | | --- | --- | | Save the current project | Ctrl+S | | Save the current project as a copy | Ctrl+Shift+S | | Create a new project | Alt+N | | Open the projects dashboard | Ctrl+O | | Open the settings dialog | Ctrl+/ | | Close the current project and return to dashboard | Ctrl+Shift+X | {/if} {#if filteredParamsKeys.length > 0} ## Parameters Panel | Description | Shortcut | | --- | --- | | Reset parameter to its default value | Ctrl+MMB | | Copy a parameter to create a reference | Alt+C | | Paste a parameter reference | Alt+V | | Remove a parameter reference | Ctrl+Shift+MMB | | Confirm and apply an expression | Ctrl+Enter | | Accept autocomplete suggestion | Tab/Enter | {/if} {#if filteredNodeGraphKeys.length > 0} ## Node Graph | Description | Shortcut | | --- | --- | | Quick Add Artboard | Hold A + Click | | Quick Add Rectangle | Hold R + Click | | Quick Add Circle | Hold C + Click | | Quick Add Star | Hold S + Click | | Quick Add Transform | Hold T + Click | | Quick Add Merge | Hold V + Click | | Quick Add Null | Hold X + Click | | Quick Add Group | Hold G + Click | | Quick Add Blur | Hold B + Click | | Quick Add Delete | Hold D + Click | | Quick Add Color | Hold F + Click | | Select all nodes | Ctrl+A | | Pan the node graph view | MMB Drag | | Add or remove single nodes from selection | Ctrl+LMB | | Add nodes to selection with a selection box | Shift+Drag | | Remove a single node from selection | Alt+LMB | | Remove nodes from selection with a selection box | Alt+Drag | | Add reroute point to an edge | Alt+LMB | | Group selected nodes into a network box | Shift+O | | Add a sticky note at the cursor position | Shift+N | | Convert selected nodes to a subnet | Shift+C | | Open the node search menu | Tab | | Toggle disable on selected node | Q | | Set selected node as render output | R | | Toggle preview on selected node | E | | Toggle render target ghost view | W | | Toggle outline rendering mode | Shift+W | | Fit view to all nodes | Shift+F | | Fit view to selected node(s) | F | | Find node in graph | Ctrl+F | | Toggle list view | Ctrl+L | | Toggle node graph fullscreen | Ctrl+Shift+F | | Toggle the color palette | Alt+C | | Toggle the edge cutter tool | Shift+Alt+C | | Copy selected node(s) | Ctrl+C | | Paste copied node(s) | Ctrl+V | | Undo last action | Ctrl+Z | | Redo last action | Ctrl+Shift+Z | | Toggle geometry spreadsheet | Shift+S | | Save a quickmark (1-9) | Ctrl+1-9 | | Recall a quickmark (1-9) | 1-9 | {/if} {#if filteredCanvasKeys.length > 0} ## Canvas | Description | Shortcut | | --- | --- | | Add a new point | Shift+LMB | | Add a smooth point | Shift+LMB+Drag | | Slide point along edge | Ctrl+Drag | | Snap to 90° increments | Shift+Alt+Drag | | Snap to 45° increments | Ctrl+Shift+Drag | | Insert a point | Shift+LMB | | Delete a point under cursor | Ctrl+Shift+LMB | | Delete selected points | Del | | Convert point to sharp or smooth | Alt+LMB | | Break handle symmetry | Alt+LMB+Drag | | Lock handle to current angle | Ctrl+Shift+Drag | | Close an open path | LMB | | Add to selection | Shift+Drag | | Remove from selection | Alt+Drag | | Exit | Esc | | Enter 2D Gizmo mode for selected shape | Enter | | Constraint to axis | Shift | | Mirror movement | Shift+Alt | | Toggle canvas background color | D | | Toggle canvas fullscreen | Ctrl+Shift+F | | Toggle timeline | Shift+T | | Erase | E | | Add a new gradient point | Shift+LMB | | Remove a gradient point | Alt+LMB | {/if} {#if filteredTimelineKeys.length > 0} ## Timeline / Animation | Description | Shortcut | | --- | --- | | Timeline view | 1 | | Dope sheet view | 2 | | Graph editor view | 3 | | State machine view | 4 | | Next frame | ArrowRight | | Previous frame | ArrowLeft | | Next keyframe | Ctrl+ArrowRight | | Previous keyframe | Ctrl+ArrowLeft | | Zoom view | MMB Scroll | | Pan view | MMB Drag | | Box select nodes and edges | LMB Drag | | Add to selection with a box | Shift+Drag | | Remove from selection with a box | Alt+Drag | | Fit graph view | Shift+F | | Delete selected keyframes | Del | | Lock keyframe movement to vertical or horizontal axis | Shift+Drag | | Lock handle to vertical or horizontal axis | Shift+Drag | | Lock handle to initial angle | Ctrl+Shift+Drag | {/if} {#if filteredGlobalKeys.length === 0 && filteredParamsKeys.length === 0 && filteredNodeGraphKeys.length === 0 && filteredCanvasKeys.length === 0 && filteredTimelineKeys.length === 0 && query} No shortcuts found matching your search. {/if} --- ### Light URL: https://animgraphlab.com/docs/nodes/light Light node used to apply simulated lighting or drop shadow effects to upstream shapes to create the illusion of depth. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Apply the light only to shapes in this group. | | Pattern | Apply effect only to specific indices (e.g., 1-5, ^0, 2-). | | Type | The type of light: distant, point, outer/inner/cast shadow. | | Apply to | Choose whether to apply the shadow to each shape individually or to a combined version of all input shapes. | | Shadow only | Output only the shadow, hiding the original object. | | Offset | The offset of the shadow result. | | Blur | The blur radius of the drop shadow. | | Color | The color of the drop shadow. | | Opacity | The opacity of the drop shadow. | | Preset | Applies standard isometric or off-axis perspectives. | | Skew X | Horizontal skew angle of the shadow. | | Scale Y | Vertical scale/direction. Negative values flip to front. | | Axis Rot | Rotation of the projection axis. Aligns the shadow baseline. | | Pivot Offset | Manual adjustment for the shadow origin point (Pivot). | | Color | The color of the light. | | Intensity | The brightness of the diffuse light. | | Softness | Controls the softness of the shading by smoothing the surface normals. | | Surface scale | Controls the perceived height/depth of the surface texture. | | Specular highlight | Enable glossy/shiny highlights (Phong reflection). | | Shininess | Controls how tight the highlight is (Exponent). Higher is glossier. | | Strength | The brightness of the specular highlight (Ks). | | Azimuth | The direction of the light source on the XY plane. | | Elevation | The angle of the light source from the XY plane towards the Z axis. | | Position | The X, Y, and Z coordinates of the point light. | | Blend mode | How the effect blends with layers below it. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | applyTo | Apply to | | azimuth | Azimuth | | blendMode | Blend mode | | elevation | Elevation | | enableSpecular | Specular highlight | | group | Group | | intensity | Intensity | | label | Label | | lightColor | Color | | lightType | Type | | pattern | Pattern | | position.x | X | | position.y | Y | | position.z | Z | | preset | Preset | | projectionAngle | Skew X | | projectionAxisAngle | Axis Rot | | projectionScale | Scale Y | | shadowBlur | Blur | | shadowColor | Color | | shadowOffset.x | Translate X | | shadowOffset.y | Translate Y | | shadowOnly | Shadow only | | shadowOpacity | Opacity | | shadowPivotOffset.x | Translate X | | shadowPivotOffset.y | Translate Y | | softness | Softness | | specularConstant | Strength | | specularExponent | Shininess | | surfaceScale | Surface scale | ## Effect types The Type parameter determines the kind of effect the node will produce. Each type has its own set of parameters to control its appearance. ## Point lights Point light creates a pseudo-3D effect by treating 2D shape like a 3D. It uses the shape's opacity to determine height: the center is "high" and the transparent edges are "low." It creates a counter-intuitive interaction with the Scale parameter: - Scale is Height, not Size: Think of Scale as the steepness of shape. High Scale: turns shape into a steep, tall mountain peak. The light only hits the very tip, resulting in a smaller, sharper light. - Low Scale: turns shape into a flat, gentle hill. The light washes over the surface, resulting in a larger, softer light. How to control the look: - Large light: Scale (try 1-5), Z position (try 50-60), Intensity (try 2-3). - Small light: Scale (try 1-2), Z position (try 10), Intensity (try 2-3). --- ### Line URL: https://animgraphlab.com/docs/nodes/line Line node creates a straight geometric line segment starting from its origin and extending in a specific direction and allows to set number of points that make up the line. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Translate | Sets the X and Y coordinates of the shape's origin. | | Length | The total length of the line. | | Points | How many points to sample along the line. | | Scale | Scales the shape. | | Rotation | Rotates the line around its origin. | | Blur | Applies a Gaussian blur effect to the shape. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | blur | Blur | | label | Label | | layers | Layers | | length | Length | | points | Points | | position.x | Translate X | | position.y | Translate Y | | rotation | Rotation | | scale | Scale | --- ### Linear gradient URL: https://animgraphlab.com/docs/nodes/linear-gradient The Linear Gradient node is a property node that defines a color gradient along a straight line. When connected to a shape, it replaces the shape's existing fill with the gradient. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | The group(s) to apply this gradient to. | | Apply to | Choose whether to apply the gradient to each shape individually or across the combined bounds of the group. | | Target | The layer type to apply the gradient to. | | Start | The start point of the gradient. | | End | The end point of the gradient. | | Interpolation | Controls the blending curve between color stops. | | Color space | The color space used for generating gradient transitions. | | Halftone | Enable halftone dot effect. | | Halftone size | Grid size for the halftone. | | Invert halftone | Invert the dot scaling mapping. | | Color stops | The colors and positions in the gradient. | | Blend mode | Controls how the gradient blends with layers below it. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | applyTo | Apply to | | blendMode | Blend mode | | colorSpace | Color space | | end.x | X | | end.y | Y | | group | Group | | halftone | Halftone | | halftoneSize | Halftone size | | interpolation | Interpolation | | invertHalftone | Invert halftone | | label | Label | | start.x | X | | start.y | Y | | stops | Color stops | | targetLayer | Target | --- ### Mask URL: https://animgraphlab.com/docs/nodes/mask Mask node uses the geometry of one set of shapes to control the visibility of another. It can also apply blend modes and opacity, making it a powerful tool for both clipping and advanced compositing. ## Inputs Input: Foreground Geometry that will be masked. Input: Background Geometry that will appear behind the masked input. Input: Mask by Shape(s) used to create the clipping mask that affects the Foreground stream. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Blend mode | Specifies the global compositing operation. | | Opacity | Controls the opacity of the Foreground input. | | Swap Inputs | Swaps the Foreground and Background inputs. | | Invert mask | Inverts the mask. | | Bake masks | If enabled, physically clips geometry using mask shape (Boolean Intersection) instead of applying a soft visual mask. This allows downstream nodes to respect the clipped bounds and properly operate on mask node result. | | Hard edge | Creates a pixel-perfect mask edge to prevent anti-aliasing artifacts like outlines on shadows. | | Mask offset | Shrinks (negative) or expands (positive) the mask shape. Useful for cleaning up blurred edges. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | bake | Bake masks | | hardEdge | Hard edge | | invertMask | Invert mask | | label | Label | | mode | Blend mode | | offset | Mask offset | | opacity | Opacity | | swapInputs | Swap Inputs | ## Masking Explained By default, a mask defines where the content is visible, not where it's cut out. The Mask by input works as a vector clipping mask that affects the Input stream. Think of it like a "window" or a "stencil." The outline of the shape(s) connected to the Mask by input defines the area where the Input shapes are allowed to be visible. The color, stroke, and opacity of the masking shape are completely ignored—only its geometry matters. This means the effect is all-or-nothing; a part of the input is either 100% visible (if it's inside the mask) or 100% invisible (if it's outside). ### Advanced Mask Settings - Hard Edge: When enabled, this forces a pixel-perfect, aliased edge for the mask. This is useful when masking shadows or semi-transparent objects to prevent the "double-fringe" artifact where the background bleeds through the edge pixels. - Mask Offset: Allows to expand (positive values) or contract (negative values) the masking shape. This is helpful for choking or spreading the mask to remove unwanted outlines from the masked content. ### Inverting the Mask To achieve a "knockout" or "punch-through" effect, you can enable the Invert Mask parameter. When enabled, this flips the mask's behavior. Instead of a window, the masking shape becomes a "punch" that cuts a hole in the Input shapes, revealing the Background or whatever is underneath. ## Compositing with Masks In addition to masking, this node acts as a compositor. It applies the selected blend mode and opacity to the Input stream after it has been masked, and then composites it over the Background. For example, you can use a Mask by shape to clip a noisy texture, and then use the Mode parameter to blend that masked texture onto a background shape using Overlay. ### Blend Modes --- ### Match size URL: https://animgraphlab.com/docs/nodes/match-size Match size transforms source geometry to align with the bounding box of a target geometry. It simplifies common layout tasks like placing an object on top of another, centering it, or aligning it to a corner, using intuitive presets. ## Inputs Input: Input 1 A shape that will be transformed (moved and/or scaled). Input: Input 3 A shape bounding box that used for alignment. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | The group of shapes to transform. If empty, all shapes are affected. | | Align | How to align the source to the target. | | Offset | An additional offset to apply after alignment. | | Scale to fit | Scales the source to fit the target bounds. | | Uniform scale | Maintains aspect ratio when scaling. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | alignment | Align | | group | Group | | label | Label | | offset.x | Translate X | | offset.y | Translate Y | | scaleToFit | Scale to fit | | uniformScale | Uniform scale | ## Alignment options Determines how the source's bounding box is positioned relative to the target's bounding box. --- ### Merge URL: https://animgraphlab.com/docs/nodes/merge Merge node is a operator used to combine multiple inputs into a single stream. Input: Inputs The Merge node accepts multiple inputs. Inputs are layered in connection order, with the last connected input appearing on top. Input order can be adjusted in the Parameters Panel. ## Parameters The Merge node has no configurable parameters in the traditional sense. Its behavior is controlled by the Input Order UI in the Parameters Panel, which is not a standard parameter. ## Layering Order The main to keep in mind, whatever in Input Order appears last, that thing will appear on top of everything else. --- ### Metadata URL: https://animgraphlab.com/docs/nodes/metadata Metadata node allows to inject non-visual information into exported SVG files. May be used for accessibility, SEO, copyright purposes. It inserts standard SVG metadata tags like <title>, <desc>, and custom inside <metadata> block. > Note: It must be connected before Artboard and Export nodes. ## Example output ## Parameters | Parameter | Description | | --- | --- | | Title | Short, human-readable title of the SVG | | Description | Detailed description for accessibility (alt text) | | Author | Creator of the file | | License | License information | | Version | Version number of the file | | Link | URL to add as a link for the SVG | | Custom fields | Custom metadata tags | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | author | Author | | customFields | Custom fields | | description | Description | | license | License | | link | Link | | title | Title | | version | Version | --- ### Mirror URL: https://animgraphlab.com/docs/nodes/mirror The Mirror node creates a symmetrical copy of an input shape across a defined axis. It can be used for creating complex, symmetrical designs from a simpler half-shape. The node includes a powerful Weld option that uses a boolean union operation to merge the original and mirrored shapes into a single, seamless path. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Direction | The direction to mirror the shape across an axis relative to its center. | | Axis offset | Offsets the mirror axis from the shape's center. Positive values move the axis right or down. | | Mirror only | Output only the mirrored shape without the original. | | Weld shapes | Merge the original and mirrored shapes into a single continuous path using a boolean union operation. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | axisOffset | Axis offset | | direction | Direction | | label | Label | | mirrorOnly | Mirror only | | weld | Weld shapes | --- ### Morph URL: https://animgraphlab.com/docs/nodes/morph Morph node smoothly blends geometry and styles of two distinct shapes together. It matches topology of the shapes even if they have different point counts, e.g., morphing a Star into an arbitrary bezier Path or Donut. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Amount | Morph blending amount | | Density | Point density resampling Higher value = more points. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | amount | Amount | | density | Density | | label | Label | --- ### Noise URL: https://animgraphlab.com/docs/nodes/noise Noise node is a deformer that modifies incoming shapes by displacing their points according to a procedural noise pattern. When a shape is passed into the Noise node, the node calculates a noise value for each point on the shape and moves it along its normal (the direction pointing "out" from the surface). The result is a new, deformed path that can be used by other nodes. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Specifies a subset of points to affect. | | Operate on | Add noise to whole shape by resampling it or use existing points. | | Resample | Number of points to resample the shape to before applying noise. Higher values capture more detail. | | Noise type | The underlying algorithm for the noise pattern. | | Amplitude | The strength of the displacement. | | Frequency | The scale or zoom of the noise pattern. | | Offset | Pans the noise pattern in X and Y. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | amplitude | Amplitude | | frequency | Frequency | | group | Group | | label | Label | | noiseType | Noise type | | offset.x | Offset X | | offset.y | Offset Y | | operateOn | Operate on | | resample | Resample | --- ### Null URL: https://animgraphlab.com/docs/nodes/null Null node is a utility node for graph organization. It accepts any type of input and outputs it exactly as is, without any modification or processing. While it doesn't perform any operations, it is a versatile tool for graph management and can act as a place for path referencing. ## Use cases - Organization: can act as a clear named output point for a specific section of your graph ("Character Head Final" or "Body OUT"). - Placeholders: insert it into a stream where you plan to add logic later, ensuring the connection flow remains intact. - Stable references: use it as the target for a Portal node. You can change the logic upstream of the Null node without breaking downstream references that point to the Null itself. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | label | Label | --- ### Overview URL: https://animgraphlab.com/docs/animation/state-machine/overview State Machine is the brain of interactive animations. While the regular Timeline plays an animation from start to finish, the State Machine lets your animation think, pause, and react to user interactions, like moving the mouse or clicking. To use the State Machine, select a node in nodegraph and open the State Machine view in the Timeline panel. ## Core concepts - States (nodes): a state is what the object is doing right now. For example, a button might have an Idle state (doing nothing), a Hover state (growing larger), and a Click state (shrinking). Each state plays a specific Animation Clip. - Transitions (arrows): these are the paths between states. They tell the animation how and when to get from one action to the next, and can smoothly crossfade between states if an animation is interrupted midway. - Variables (rules): variables act as sensors. The system automatically tracks built-in variables like hover and click. If the user hovers over a shape named "Star", the hover variable changes to "Star". Transitions use these variables to decide if they are allowed to move to the next state. ## Entry point Every State Machine has an Entry node. When the animation begins, it instantly travels out of the Entry node following the connected arrow. The state it points to becomes your "Starting State" (usually an Idle or default resting state). ## Built-in variables State Machine automatically tracks user interactions with canvas shapes. You can use these in your transition conditions: - hover: contains the ID or Label of the shape the mouse is currently resting on. - click: contains the ID or Label of the shape that was just clicked. - pointerdown: contains the ID or Label of the shape being pressed down on. - pointerup: contains the ID or Label of the shape where a press was released. > Note: You can also create your own custom variables by clicking the `+` button in the Variables sidebar. ## Shortcuts | Description | Shortcut | | --- | --- | | Timeline view | 1 | | Dope sheet view | 2 | | Graph editor view | 3 | | State machine view | 4 | | Next frame | ArrowRight | | Previous frame | ArrowLeft | | Next keyframe | Ctrl+ArrowRight | | Previous keyframe | Ctrl+ArrowLeft | | Zoom view | MMB Scroll | | Pan view | MMB Drag | | Box select nodes and edges | LMB Drag | | Add to selection with a box | Shift+Drag | | Remove from selection with a box | Alt+Drag | | Fit graph view | Shift+F | | Delete selected keyframes | Del | | Lock keyframe movement to vertical or horizontal axis | Shift+Drag | | Lock handle to vertical or horizontal axis | Shift+Drag | | Lock handle to initial angle | Ctrl+Shift+Drag | --- ### Overview URL: https://animgraphlab.com/docs/ui/canvas/overview Canvas is the main visual viewport where geometry generated and rendered. It provides direct, interactive tools to manipulate shapes, edit paths. ## Navigation - Pan: MMB + drag, or swipe with two fingers on touch devices. - Zoom: scroll Mouse Wheel, or use pinch-to-zoom on touch screens. - Fit View: press Shift + F to center and fit all objects into the viewport. - Fullscreen: press Ctrl + Shift + F to toggle fullscreen mode. ## Interactive modes Canvas switches into different interactive modes depending on the selected node. > Note: contextual shortcuts overlay will appear at the bottom of the screen if enabled in settings. ### Transform & special gizmos Select a transformable node (like Transform, Match Size, or Bend) and press Enter over canvas to activate its interactive gizmo. This allows directly manipulate handles for position, scale, rotation, or effect-specific parameters (like a clip plane angle). ### Path editing Double-click any Path node or other shape node on the canvas to enter path edit mode. Hover over "shortcuts" overlay to see all available path editing shortcuts. > Note: if node supports path editing, a contextual overlay will appear to inform that. ### Pencil drawing Select a Pencil node. If it's empty, drawing mode activates automatically. Click and drag to draw freehand strokes. Press E to toggle the eraser. ### Group selection When using Group node in Manual mode, click Pick from Canvas. Then LMB + Drag selection box over shapes or points directly on the canvas to add to group. ## Guides & rulers To enable visual guides and rulers to help align artwork: - Open View menu in Canvas menubar. - Toggle Show guides (this will also automatically show rulers). - Click and drag from the top or left ruler onto the canvas to create a new guide line. - To move a guide, drag it with your mouse. To delete it, drag it back onto the ruler or select it and press Delete or Backspace. ## Artboard guides When setting up scenes without a dedicated Artboard node, you can enable the Artboard Guide visual overlay. This gives a reference frame for standard aspect ratios (like Desktop 1440x1024 or Mobile). Use dropdown in top Canvas menubar to toggle and size it. ## Shortcuts | Description | Shortcut | | --- | --- | | Add a new point | Shift+LMB | | Add a smooth point | Shift+LMB+Drag | | Slide point along edge | Ctrl+Drag | | Snap to 90° increments | Shift+Alt+Drag | | Snap to 45° increments | Ctrl+Shift+Drag | | Insert a point | Shift+LMB | | Delete a point under cursor | Ctrl+Shift+LMB | | Delete selected points | Del | | Convert point to sharp or smooth | Alt+LMB | | Break handle symmetry | Alt+LMB+Drag | | Lock handle to current angle | Ctrl+Shift+Drag | | Close an open path | LMB | | Add to selection | Shift+Drag | | Remove from selection | Alt+Drag | | Exit | Esc | | Enter 2D Gizmo mode for selected shape | Enter | | Constraint to axis | Shift | | Mirror movement | Shift+Alt | | Toggle canvas background color | D | | Toggle canvas fullscreen | Ctrl+Shift+F | | Toggle timeline | Shift+T | | Erase | E | | Add a new gradient point | Shift+LMB | | Remove a gradient point | Alt+LMB | --- ### Overview URL: https://animgraphlab.com/docs/ui/nodegraph/overview Nograph is the primary place where you create and connect nodes to build your illustrations, designs. It provides a visual representation of entire data flow like creating a start then bending it. Nodegraph allows to create complex system that layers can't offer in a organized manner. ## Navigation & Quickmarks Navigating large graphs can be tedious. Quickmarks system allows to save and instantly recall exact viewport position and subnet depth. - Save a quickmark: press Ctrl + 1-9 to save your current view. - Recall a quickmark: press corresponding number key 1-9 to instantly snap back to that view. You can also use standard navigation: - Pan: MMB drag. - Zoom: mouse Wheel scroll. - Fit view: press Shift + F to fit all nodes, or F to fit only selected nodes. ## Inputs and outputs - Inputs (top): receive shape or properties from other nodes. - Outputs (bottom): send the processed shape or properties to other nodes. ## Node wings When hovered over a node, colored "wings" appear on left and right sides. These are quick-access toggles for important node states. > Note: use shortcuts to quickly set render flag 'R', preview node 'E' or disable node 'Q'. ## Node search Node search menu is your primary tool for adding new nodes to the workspace. - Access: press CTRL+F anywhere on the nodegraph to open the search menu. - Filtering: start typing to instantly filter available nodes and your custom group presets. - Adaptive UI: desktop users get a fast, contextual popup menu, while mobile and tablet users get a touch-friendly drill-down bottom sheet. ## Auto wiring Abuse auto wiring feature as much as possible as it's the fastest way to connect nodes. - Select a node. - Click TAB or RMB to search node. - Add node and it will auto wire to selected node. > Note: auto wiring supports multi-input nodes as well. First selected node will be first input, second selected node will be second input. ## Quick add hotkeys The fastest way to build graph is by using quick add hotkeys. This allows to add common utility and shape nodes without opening the search menu. - Add in empty space: hold a mapped key (e.g., R for Rectangle, T for Transform) and click anywhere in the nodegraph. - Insert on a wire: hold a quick add key and click directly on an existing wire to instantly insert and auto-wire new node between two existing nodes. > Note: quick add keys are mapped to the left side of the keyboard by default to keep your right hand on the mouse. You can switch to a left-handed layout (right side of keyboard) in Settings -> General -> Node Hotkeys. ## Auto-layout If your graph becomes messy and tangled, you can automatically untangle and align nodes into a structured top-to-bottom hierarchy. - Select the nodes you want to organize (or select nothing to organize the entire graph). - In the Nodegraph menubar, click Layout → Auto-layout → Vertical. ## Subnet navigation When using Subnet nodes to encapsulate logic, you can seamlessly traverse in and out of them. - Dive in: double-click a Subnet node. - Navigate out: use interactive breadcrumbs in top-left corner of the nodegraph to jump back to the parent graph or the root level. ## Node list view When your nodegraph grows large, finding specific nodes or changing render targets can become difficult. List view solves this by providing a flat, searchable table of all nodes in your graph, including those nested deep inside subnets. - Access: open via the Nodegraph menubar View → List view - Navigation: click any row to instantly jump to that node. The graph will automatically dive into the correct subnet, select the node, and pan/zoom to fit it. - Quick Flags: use the eye and monitor icons on the right side of the list to set the node as a Preview or Render target without needing to locate it visually on the canvas. ## Node find bar For rapid navigation via keyboard, use the Find bar to spotlight specific nodes already present in your scene. - Use your configured find shortcut (typically Ctrl + F or Cmd + F) to open the Find bar. - Type part of a node's label or ID. - Use Arrow Up or Arrow Down to navigate results. - Press Enter to instantly jump to the selected node. ## AI-generated workflows AnimGraphLab's architecture relies on a open JSON format. This means you can use AI tools, chatbots to generate complex node networks for you. You can prompt an LLM to generate an AnimGraphLab-compatible JSON payload representing a specific procedural effect, copy the resulting code block, and simply press Ctrl + V (or Cmd + V) directly on in Nodegraph to paste the entire network. Below are three examples showcasing static, animation, and state machine scene. ### 1. Static scene payload It creates a base Star, scatters points using the Scatter node, and uses copyToPoints to instance Circle dots along the edge of the star. Copy this block and press Ctrl+V in Nodegraph: ### 2. Animation payload Includes an animations object mapped to node parameters, along with basic timeline configuration. It will auto-play a rotation loop. Copy this block and press Ctrl+V in Nodegraph: ### 3. State Machine payload Defines a fully interactive component to react to native interactions like hover, triggering transitions between animation clips. Copy this block and press Ctrl+V in Nodegraph: ### JSON payload schema To instruct an AI (LLM) to generate valid nodegraph without structural errors, provide it with the following JSON interface. --- ### Overview URL: https://animgraphlab.com/docs/ui/parameters-panel/overview Parameters panel is where properties of the currently selected node are edited. Each node type has a unique set of parameters that control its behavior. ## Panel header When a node is selected, two icons appear in the panel's header: - Presets: opens a menu to save, apply, and manage reusable parameter configurations for the selected node. See the Node Presets documentation for more details. - Documentation: Opens a dialog with detailed documentation for the selected node type, explaining what each parameter does and how it can be used. ## Parameter states To identify which parameters have been changed from their default values, inputs are visually highlighted. ## Context menu & Actions Right-clicking (or long-pressing on touch devices) any parameter opens a contextual menu that provides operations for that specific input: - Reset to default: reverts the parameter back to its original value. - Copy/Paste parameter: creates a reference link. See Parameter referencing. - Add/Remove expression: converts the parameter into a formula field. See Expressions. - Add/Remove keyframe: in an animation context, lets to lock current value to the timeline. - Promote to controller: links parameter to a global Controller node. Used for creating master sliders. ## Shortcuts | Description | Shortcut | | --- | --- | | Reset parameter to its default value | Ctrl+MMB | | Copy a parameter to create a reference | Alt+C | | Paste a parameter reference | Alt+V | | Remove a parameter reference | Ctrl+Shift+MMB | | Confirm and apply an expression | Ctrl+Enter | | Accept autocomplete suggestion | Tab/Enter | --- ### Pack shapes URL: https://animgraphlab.com/docs/nodes/pack-shapes Pack shapes node takes a group of input shapes and arranges them as tightly as possible without overlapping. It can pack them freely into an open space, or confine them strictly within the boundaries of a Target shape input. > Note: Grid resolution parameter defines the accuracy of the collision testing. A higher grid resolution (e.g., 500) results in fewer empty gaps and higher precision, but takes longer to compute. > Note: Parameter are highly senstive. Small slider change can change the visual look a lot and may increase compute time by a lot. > Note: Instead of sliding parameter, double-click and type values manually to prevent a lot of computations. > Note: Pack shapes node requries heavy computation in some cases. ## Inputs Input: Shapes to pack Shapes to pack tightly together. Input: Target shape Optional target bounding container. Input: Mask Optional mask. Packed shapes will avoid such areas. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Grid resolution | The internal grid resolution used for packing calculations. Higher values (e.g. 500) provide much tighter and more accurate packing for complex shapes, but increase calculation time. Lower values (e.g. 50) are fast but leave larger gaps. | | Rotation step | Tries rotating the shape by this number of degrees to get better packing. 360 = No rotation. 180 = 2 ways (up/down). 90 = 4 ways. Smaller steps yield tighter packing but take longer. | | Spacing | Margin distance between packed shapes. | | Invert mask | If true, shapes will only be packed inside the mask area. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | invertMask | Invert mask | | iterations | Grid resolution | | label | Label | | rotationStep | Rotation step | | spacing | Spacing | --- ### Parameter referencing URL: https://animgraphlab.com/docs/ui/parameters-panel/parameter-referencing Parameter referencing allows you to drive the value of one parameter using the value from another. This creates a live link between nodes, enabling complex and procedural behaviors. For example, you can make the width of a Rectangle node always equal to the radiusX of a Circle node. When a parameter is being controlled by a reference, its input field in the Parameters Panel will be disabled and highlighted with a dashed purple outline. ## Shortcuts | Description | Shortcut | | --- | --- | | Reset parameter to its default value | Ctrl+MMB | | Copy a parameter to create a reference | Alt+C | | Paste a parameter reference | Alt+V | | Remove a parameter reference | Ctrl+Shift+MMB | | Confirm and apply an expression | Ctrl+Enter | | Accept autocomplete suggestion | Tab/Enter | ## Creating a reference - In the Parameters Panel, hover over the parameter you want to use as the source. - Right-click to open the context menu and select Copy Parameter. - Navigate to a different node and hover over the target parameter you want to control. - Right-click and select Paste Relative Reference. The target parameter's value will now be linked to the source parameter. Any changes to the source will be immediately reflected in the target. ## Removing a reference - Context menu: RMB -> remove expression - Shortcut: Hover over the referenced parameter and use the shortcut Ctrl Shift MMB Once removed, the parameter will revert to its last known value (or default) and can be edited manually again. ## Visualizing references To help you keep track of connections, dashed purple lines are drawn in the Node Graph between nodes that have parameter references. You can toggle the visibility of these lines from the main menu under view > show reference lines. --- ### Parameters presets URL: https://animgraphlab.com/docs/ui/parameters-panel/parameters-presets Node Presets allow you to save a specific configuration of a node's parameters and reuse it later. This is useful for quickly applying common styles or settings without having to manually adjust each parameter every time. Presets are saved locally in your browser and are specific to each node type (e.g., presets for a Circle node will not appear for a Text node). ## Managing Presets You can access the presets menu by clicking the icon in the header of the Parameters Panel when a node is selected. ### Applying a Preset To apply a saved preset, simply click on its name in the dropdown menu. The parameters of the currently selected node will be updated instantly with the values from the preset. ### Saving a Preset - Adjust the node's parameters to your desired configuration. - Click the icon and select "Save node preset". - In the dialog that appears, enter a unique name for your preset and click "Save". If you enter a name that already exists, you will be asked to confirm if you want to overwrite the existing preset with the new values. ### Renaming & Deleting Presets To rename or delete a preset, open the presets menu and hover over the preset you wish to modify. The rename () and delete () icons will appear on the right. Click the appropriate icon and follow the prompts. A confirmation dialog will appear before deleting to prevent accidents. This action cannot be undone. ## Permanent Defaults In addition to saved presets, you can also override the default settings for any node type. This is useful if you find yourself always changing the same parameters every time you create a new node (e.g., always wanting a Circle to have a stroke by default). ### Saving a Permanent Default - Configure a node exactly how you want your new default to be. - Open the presets menu and select "Save as permanent default". From now on, any new node of this type that you create will start with these settings. ### Reverting to App Defaults If you have a permanent default saved for a node type, a new menu option will appear: "Revert to app defaults". Clicking this will do two things: - It will immediately reset the parameters of the currently selected node back to the original application defaults. - It will delete your custom permanent default, so any future nodes will also use the original application defaults. --- ### Parent constraint URL: https://animgraphlab.com/docs/nodes/parentConstraint Parent constraint node creates a parent-child relationship between two objects without altering the hierarchy. The source object (child) inherits the Transform properties (Position, Rotation, Scale) of the target object (parent). In playground example above, if hammer handle rotates, the head will follow the rotation while maintaining its offset position, if Maintain offset is enabled. ## Inputs Input: Input 1 Source (Child): The shape that will be moved/transformed. Input: Input 3 Target (Parent): The shape reference to constrain to. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Translate | Toggle. Inherit the position from the target. | | Maintain offset | Toggle. If on, offset is applied in Local Space (rotates with parent). If off, offset is applied in World Space (floating). | | Offset | Offset distance from the parent. | | Rotate | Toggle. Inherit the rotation from the target. | | Rotation offset | Additional offset for rotation. | | Scale | Toggle. Inherit the scale from the target. | | Scale | Additional offset for scale. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | label | Label | | maintainOffset | Maintain offset | | offsetPos.x | Translate X | | offsetPos.y | Translate Y | | offsetRot | Rotation offset | | offsetScale.x | Scale X | | offsetScale.y | Scale Y | | rotate | Rotate | | scale | Scale | | translate | Translate | ## Difference vs Match Size While both nodes move one object to match another, they serve different purposes. --- ### Path URL: https://animgraphlab.com/docs/nodes/path Path node is used to create complex, custom vector shapes. You can draw paths by adding, removing, and manipulating points and their bezier handles directly on the main canvas. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Translate | Sets the X and Y coordinates of the shape's center. | | Scale | Scales the shape from its center. | | Rotation | Rotates the shape around its center. | | Blur | Applies a Gaussian blur effect to the shape. | | Closed | Toggles whether the path is a closed shape. | | Markers | Add SVG markers (like arrowheads) to the path | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | blur | Blur | | d | D | | isClosed | Closed | | label | Label | | layers | Layers | | markers | Markers | | points | Points | | position.x | Translate X | | position.y | Translate Y | | rotation | Rotation | | scale | Scale | | selectedPointIds | Selected Point Ids | --- ### Pattern generator URL: https://animgraphlab.com/docs/nodes/pattern Pattern generator node takes an input shape (the "Tile") and duplicates it into highly customizable repeating arrangements. It supports everything from strict architectural grids to nature-inspired spirals and random organic scatters. Unlike Scatter node which generates abstract points, Pattern node directly duplicates the input geometry. ## Inputs Input: Tile shape Shape(s) to be duplicated across the pattern. Input: Boundary Optional boundary shape. If provided, pattern will only generate inside this boundary. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Layout | The mathematical arrangement used to distribute shapes. | | Spacing | Base distance between each tile. | | Stagger | How much every other row is shifted. | | Row offset | Shifts every alternating row horizontally. | | Column offset | Shifts every alternating column vertically. | | Amplitude | Vertical height of the sine wave. | | Frequency | Frequency (tightness) of the sine wave. | | Rings | Number of concentric rings to generate. | | Base rotation | Base rotation applied to every tile. | | Position | Randomizes placement of each tile. | | Rotation | Randomizes rotation of each tile. | | Scale | Randomizes size of each tile. | | Step | Apply modifiers to every Nth tile. | | Offset | Shift the starting index for the sequence. | | Rotation | Added rotation for the Nth tile. | | Scale | Scale multiplier for the Nth tile. | | Translate X | Horizontal offset for the Nth tile. | | Translate Y | Vertical offset for the Nth tile. | | Seed | Random seed for jitter and organic layouts. | | Output mode | How the generated tiles are output into the graph. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | colOffset | Column offset | | jitterPos | Position | | jitterRot | Rotation | | jitterScale | Scale | | label | Label | | layout | Layout | | nthOffset | Offset | | nthRotation | Rotation | | nthScale | Scale | | nthStep | Step | | nthTranslateX | Translate X | | nthTranslateY | Translate Y | | outputMode | Output mode | | rings | Rings | | rotation | Base rotation | | rowOffset | Row offset | | seed | Seed | | spacing | Spacing | | stagger | Stagger | | waveAmplitude | Amplitude | | waveFrequency | Frequency | ## Layout methods ## Boundaries and clipping By default, Pattern node generates an infinite pattern that covers a large generic area (1000x1000). If secondary input (Boundary) is connected: - pattern automatically calculates exactly how many rows/columns are needed to fill the boundary. - pattern is automatically centered inside the boundary. - any tiles that spill over the edge of the boundary are Boolean clipped to perfectly match the silhouette of the boundary shape. ## Adding randomness To break up perfectly uniform grids and make them look hand-drawn or natural, use the jitter parameters: - Position jitter: shifts tiles slightly off their perfect grid coordinates. - Rotation jitter: adds a random rotation offset (e.g., +/- 10 degrees). - Scale jitter: adds random scaling to the tiles, allowing some to be slightly larger or smaller than others. > Note: Use 'seed' parameter to randomize the look of added jitter. ## Output mode - Individual shapes: every duplicated tile remains an independent shape in the graph. This is useful if you want to animate them individually downstream or apply random colors. - Combined shape: merges all generated tiles into a single, unified SVG Path. This is significantly faster for rendering massive patterns (thousands of tiles) and guarantees clean, gapless rendering if you apply strokes or drop shadows later in the graph. --- ### Pattern matching URL: https://animgraphlab.com/docs/ui/parameters-panel/pattern-matching Pattern matching is a text-based method for selecting multiple shapes or points at once. It's used in parameters like Group and Indices in nodes such as Group, Light, and Transform. There are two types of pattern matching: Name matching for selecting items by their label, and Index matching for selecting items by their position. ## Name/ID Matching This method is used to select shapes based on their Label or internal ID. You can also target specific shapes by their numeric Index (e.g. 0, 1, 0-5) directly in this field. - Wildcards: use * to match any sequence of characters and ? to match any single character. - Exclusion: start a pattern with ^ to exclude items that match. - Multiple patterns: separate multiple patterns with a comma , to combine selections. Rectangle*', 'The * acts as a wildcard for any number of characters.'], ['all items with "Temp" in their name', '*Temp*', 'Wildcards can be used at the beginning and end of a pattern.'], ['"Shape 1", "Shape 2", "Shape A", etc.', 'Shape ?', 'The ? is a wildcard for a single character.'], ['all except those starting with "Box"', '^Box*', 'The ^ character at the start of a pattern excludes matching items.'], ['starting with "Rect", "Shape 1"', 'Rect*, Shape 1', 'Commas are used to combine multiple patterns.'], ['all items', '*', 'A single wildcard matches everything. An empty pattern also works.'] ]} /> ## Index Matching This method is used to select items based on their numerical order (index). This is common for selecting points within a shape or shapes within a stream of data. Indices are zero-based, meaning the first item is at index 0. - Ranges: use a hyphen - to select a range of indices (e.g., 1-5). - Open-ended ranges: leave one side of a range empty to select from the beginning or to the end (e.g., 2- selects from index 2 to the last item). - Relative indices: use negative numbers to select items counting from the end of the list (e.g., -1 is the last item). - Exclusion: start a pattern with ^ to exclude specific indices from the selection. - Multiple patterns: separate multiple patterns with a comma ,. > Note: First item will be index 0, not 1, because count starts from 0. 5', 'Indices are zero-based, so the 6th item is at index 5.'], ['last item', '-1', 'Negative indices count backwards from the end.'], ['second to last item', '-2', 'Selects the item immediately before the last one.'], ['2nd through 6th items', '1-5', 'Selects an inclusive range of indices.'], ['all items from the 3rd item onwards', '2-', 'An open-ended range selects from the start index to the end of the list.'], ['first 4 items (indices 0 to 3)', '-3', 'An open-ended range selects from the beginning up to the end index.'], ['all items except the first one', '^0', 'The ^ character excludes the specified index or range.'], ['2nd, 4th, and 6th items', '1, 3, 5', 'Commas are used to select multiple specific indices.'], ['items 1-11 and 13 onwards, but not item 6', '0-10, ^5, 12-', 'Patterns are evaluated in order: inclusions are added, then exclusions are removed.'], ['all items', '* or (empty)', 'A wildcard or an empty string selects all available indices.'] ]} /> --- ### Pencil URL: https://animgraphlab.com/docs/nodes/pencil Pencil node AKA "freehand" allows to draw freehand strokes directly on canvas with pressure-sensitive, variable-width lines. ## Parameters | Parameter | Description | | --- | --- | | Size | The base size (diameter) of the stroke. | | Erase Size | The size of the eraser when in erase mode (CTRL+Mouse Wheel). | | Thinning | Controls pressure of stroke width. Positive = thinner, negative = thicker. | | Smoothing | How much to smooth the stroke's points. Higher values create smoother curves. | | Streamline | How much to stabilize the stroke while drawing, reducing wobble. | | Easing | The easing function to apply to the pressure along the stroke. | | Taper start | The length of the taper at the start of the stroke, as a fraction of the total length. | | Cap start | Toggles a round cap at the start of the stroke. | | Taper end | The length of the taper at the end of the stroke, as a fraction of the total length. | | Cap end | Toggles a round cap at the end of the stroke. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | capEnd | Cap end | | capStart | Cap start | | easing | Easing | | eraseSize | Erase Size | | label | Label | | layers | Layers | | points | Points | | size | Size | | smoothing | Smoothing | | streamline | Streamline | | taperEnd | Taper end | | taperStart | Taper start | | thinning | Thinning | ## Drawing and editing - Draw: Select a Pencil node. If it's empty, drawing mode will activate automatically. You can also double-click a Pencil node to continue drawing. Click and drag on the canvas to create stroke. - Erase: While a Pencil node is selected, press E to toggle erase mode. Click and drag to erase parts of existing strokes. The erase circle's size is controlled by the Size parameter. You can also adjust the erase size on-the-fly by holding Ctrl and using the mouse wheel. - Edit as Path: to convert your drawing into an editable path with control points, while not in draw mode, double-click on any stroke on canvas. This will "bake" strokes into a new using Path node. ## Styling Pencil node generates a single path shape from all its strokes. You can style this shape using the Fill Color, Stroke Color, and Stroke Width parameters. For more advanced styling, connect the Pencil node to other nodes like Linear gradient or Light. --- ### Perspective URL: https://animgraphlab.com/docs/nodes/perspective Perspective node applies a 4-point projective transformation to any shape, group of shapes. It is useful for creating faux-3D effects, floor shadows, or aligning 2D graphics to a perspective plane in a background image. > Note: Unlike standard transforms (Scale, Rotate), Perspective is a non-affine transformation. Meaning, the node will 'bake' the geometry into a new path with explicit points to achieve the distortion. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Filter which shapes to affect. | | Preset | Applies standard isometric or off-axis perspectives. | | Rotate X | Rotation around X axis. | | Rotate Y | Rotation around Y axis. | | Rotate Z | Rotation around Z axis. | | Top left offset | Additional offset from the base projection. | | Top right offset | Additional offset from the base projection. | | Bottom right offset | Additional offset from the base projection. | | Bottom left offset | Additional offset from the base projection. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | bottomLeft.x | X | | bottomLeft.y | Y | | bottomRight.x | X | | bottomRight.y | Y | | group | Group | | label | Label | | preset | Preset | | rotateX | Rotate X | | rotateY | Rotate Y | | rotateZ | Rotate Z | | topLeft.x | X | | topLeft.y | Y | | topRight.x | X | | topRight.y | Y | Input: Input 1 The shape that will be moved/distorted. Input: Input 3 The shape reference to match perspective to. ## Gizmo controls When the node is selected, press Enter: - Corner handles: Drag any of the four corners to distort the perspective plane. - Shift+Drag: Snaps the handle to align horizontally or vertically with its neighbors. Visual guides will appear to indicate alignment. > Note: You can convert Perspective node result into editable path by double-clicking on result in canvas. --- ### Pixelate URL: https://animgraphlab.com/docs/nodes/pixelate Pixelate node processes vector shapes into a grid of squares, simulating a low-resolution pixel art style. The core difference between raster (bitmap) pixelate is that vector works directly on shape path rather than pixels. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Select shapes to pixelate. If empty, all are affected. | | Mode | How to apply the pixelation effect. | | Size | The size of each pixel square or step. | | Gap | Spacing between pixels (Pixelate mode only). | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | gap | Gap | | group | Group | | label | Label | | mode | Mode | | pixelSize | Size | --- ### Polygon URL: https://animgraphlab.com/docs/nodes/polygon Polygon node generates a regular polygon, which is a shape with equal sides and equal angles. You can specify the number of sides to create shapes ranging from a triangle (3 sides) to a hexagon (6 sides) and beyond. As the number of sides increases, the polygon approximates a circle. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Translate | Sets the X and Y coordinates of the shape's center. | | Sides | The number of sides of the polygon. | | Radius | The distance from the center to the vertices. | | Scale | Scales the shape from its center. | | Rotation | Rotates the shape around its center. | | Blur | Applies a Gaussian blur effect to the shape. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | blur | Blur | | label | Label | | layers | Layers | | position.x | Translate X | | position.y | Translate Y | | radius | Radius | | rotation | Rotation | | scale | Scale | | sides | Sides | --- ### Portal URL: https://animgraphlab.com/docs/nodes/portal Portal node allows to bring geometry from other parts of nodegraph into the current stream without drawing long, messy wires across. In simple terms, it lets you "pick up" geometry from one place and "drop it" into another without any visible connections. It is designed to work exclusively with Null nodes. A Null node is typically placed at the end of a logic chain (like a "Left Arm") so that later that Null node can be referenced to combine it into the final character or any other assembly. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Targets | List of Null nodes to merge geometry from. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | label | Label | | targets | Targets | ## Referencing - Auto-updating labels: If you rename a target Null node like changing "OUT_Arm" to "OUT_Robot_Arm", the Portal node will automatically detect this change and update everything on the fly to display the new name. - Stable connections: You can move the target node anywhere in the graph or change its upstream inputs, and the Portal will maintain the link as long as the specific Null node itself exists. ## Usage --- ### Radial gradient URL: https://animgraphlab.com/docs/nodes/radial-gradient The Radial Gradient node is a property node that defines a color gradient radiating outwards from a central point. When connected to a shape, it replaces the shape's existing fill with the gradient. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | The group(s) to apply this gradient to. | | Apply to | Choose whether to apply the gradient to each shape individually or across the combined bounds of the group. | | Target | The layer type to apply the gradient to. | | Center | The center of the gradient. | | Radius | The radius of the gradient. | | Interpolation | Controls the blending curve between color stops. | | Color space | The color space used for generating gradient transitions. | | Halftone | Enable halftone dot effect. | | Halftone size | Grid size for the halftone. | | Invert halftone | Invert the dot scaling mapping. | | Color stops | The colors and positions in the gradient. | | Blend mode | Controls how the gradient blends with layers below it. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | applyTo | Apply to | | blendMode | Blend mode | | center.x | X | | center.y | Y | | colorSpace | Color space | | group | Group | | halftone | Halftone | | halftoneSize | Halftone size | | interpolation | Interpolation | | invertHalftone | Invert halftone | | label | Label | | radius | Radius | | stops | Color stops | | targetLayer | Target | --- ### Rectangle URL: https://animgraphlab.com/docs/nodes/rectangle ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node in the graph. | | Translate | Moves shape in X and Y direction. | | Width | Controls the width of the rectangle. | | Height | Controls the height of the rectangle. | | Scale | Scales the shape from its center. | | Rotation | Rotates the center. | | Corner Radius | Allows for rounding corners. | | Blur | Applies a Gaussian blur effect to the shape. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | blur | Blur | | cornerRadius.bl | BL | | cornerRadius.br | BR | | cornerRadius.tl | TL | | cornerRadius.tr | TR | | cornerRadiusLinked | Corner Radius Linked | | height | Height | | label | Label | | layers | Layers | | position.x | Translate X | | position.y | Translate Y | | rotation | Rotation | | scale | Scale | | width | Width | --- ### Resample URL: https://animgraphlab.com/docs/nodes/resample Resample node rebuilds a shape's outline by changing the number and spacing of its points. Its primary purpose is to create a clean, uniform distribution of points along a curve, which is essential for predictable deformations and for cleaning up complex geometry generated by other nodes, such as the Boolean node. The Resample node can operate on any shape (like Rectangles, Circles, or Stars) by first converting its outline into a path internally before processing. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Select shapes to resample. If empty, all shapes are affected. | | Mode | Determines how the path is resampled. | | Length | The target distance between points. | | Count | The total number of points to generate. | | Simplify | Enable or disable path simplification. | | Tolerance | Simplification tolerance. Higher values create fewer points. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | count | Count | | group | Group | | label | Label | | length | Length | | mode | Mode | | tolerance | Tolerance | | useSimplify | Simplify | ## Resampling Modes Resample node has two distinct methods for distributing points, each with a different goal for the final output. ### When to Use Which Mode - Use By Point Count when... you need a specific number of points for another operation, like copying shapes to each point. It gives a smooth, organic result because the visual distance between points is always the same. Think of it like placing beads evenly on a string. - Use By Length when... you need a rigid, mechanical structure where the segment length between points must be identical. Think of it like building a fence where every post is exactly 2 meters from the next. ## Practical Use Cases --- ### Retime URL: https://animgraphlab.com/docs/nodes/retime Retime node allows to manipulate time for any animated geometry passing through it. Can speed up, slow down, reverse, offset, or loop upstream animations without manually adjusting keyframes. ## Usage Procedural nodegraphs calculate geometry for the current frame. To alter time (for example, to display frame 10 while timeline is actually on frame 20), Retime needs to know what the geometry looked like in the past. Instead of forcing entire graph to recalculate multiple times per frame, Retime requires to Bake geometry. This pre-calculates animation and stores the result safely in memory, allowing Retime to instantly access and interpolate any frame at any time. - Connect animated node chain to the Retime node. - Click Bake geometry in the parameters panel. - Adjust Speed, Offset, or set a Custom frame. > Note: If you change any parameters or keyframes on nodes upstream of Retime node, you must click 'Update bake' for those changes to be reflected in the output. The node will display a warning when it detects changes. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Bake geometry | Bake upstream geometry to memory for retiming. | | Mode | How the retiming is calculated. | | Speed | Speed multiplier (e.g. 0.5 is half speed, -1 is reverse). | | Offset | Shifts the animation forward or backward in frames. | | Custom frame | Evaluates the input explicitly at this frame. | | Out of Bounds | What happens when the requested frame is outside the baked range. | | Custom range | Restrict the retiming to a specific sub-range of frames. | | Frame Range | The in and out points for the animation loop. | | Smooth interpolation | Blends geometry smoothly between integer frames (essential for slow-motion). | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | _bakedUpstreamHash | _baked Upstream Hash | | _bakeProgress | _bake Progress | | _isBaked | _is Baked | | _isBaking | _is Baking | | _isDirty | _is Dirty | | customFrame | Custom frame | | frameRange.end | End | | frameRange.start | Start | | label | Label | | mode | Mode | | offset | Offset | | outOfBounds | Out of Bounds | | smooth | Smooth interpolation | | speed | Speed | | triggerBake | Bake geometry | | useCustomRange | Custom range | --- ### Scatter URL: https://animgraphlab.com/docs/nodes/scatter Scatter node creates point cloud based on an input shape with options to control min/max with outliers scale, point distribution types and more. These points can then be used by other nodes, such as Copy to Points, to instance other shapes. It has two primary ways of scattering points: - fill: fills the interior area of a shape. - outline: distributes along the shape's outline. ## Inputs Input: Source Shape(s) to scatter points on or within. Input: Mask An optional shape or group of shapes that defines an area where points will not be scattered. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Method | Determines where points are generated. | | Arrangement | How initial points are placed before relaxation. | | Distribution | Controls how many points are generated. | | Density | Number of points per 100x100 area. | | Count | The total number of points to generate. | | Spacing | The desired distance between points. | | Invert mask | If true, points will only be scattered inside the mask area. | | Seed | Random seed for repeatable results. | | Relax iterations | Pushes points apart to create a more uniform distribution. 0 = chaotic noise. | | Jitter | Adds a random offset to break up grid patterns. | | Scale mode | Determines how point scale is calculated. | | Min scale | Minimum scale. | | Max scale | Maximum scale. | | Outlier percent | Percentage of elements to extend beyond the given range. | | Outlier range | Controls how much the outlier range extends beyond the original. | | Outlier mode | Extend the range either by multiplication or addition. | | Outlier direction | Extend both the minimum and maximum limit of the range, or only one. | | Outlier seed | Controls random selection of outliers. | | Gradient start | Start point of the gradient (normalized 0-1 space). | | Gradient end | The end point of the gradient (normalized 0-1 space). | | Frequency | The scale or zoom of the noise pattern. | | Offset | Pans the noise pattern in X and Y. | | Align to normal | Orients points based on the shape outline. | | Min rotation | Minimum random rotation around the normal. | | Max rotation | Maximum random rotation around the normal. | | Vector | A global direction to blend orientation towards. | | Blend amount | How much to blend with the global direction. | | Transfer attributes | A comma-separated list of attributes to copy from the source shape to the points (e.g., "color, blur"). | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | alignToNormal | Align to normal | | arrangement | Arrangement | | blendAmount | Blend amount | | blendVector.x | X | | blendVector.y | Y | | count | Count | | density | Density | | distribution | Distribution | | gradientEnd.x | X | | gradientEnd.y | Y | | gradientStart.x | X | | gradientStart.y | Y | | invertMask | Invert mask | | jitter | Jitter | | label | Label | | maxRotation | Max rotation | | maxScale | Max scale | | method | Method | | minRotation | Min rotation | | minScale | Min scale | | noiseFrequency | Frequency | | noiseOffset.x | Offset X | | noiseOffset.y | Offset Y | | outlierDirection | Outlier direction | | outlierMode | Outlier mode | | outlierPercent | Outlier percent | | outlierRange | Outlier range | | outlierSeed | Outlier seed | | relaxIterations | Relax iterations | | scaleMode | Scale mode | | seed | Seed | | spacing | Spacing | | transferAttributes | Transfer attributes | ## Generation methods The Method parameter is the most fundamental control, determining where points are created. ## Arrangement Arrangement parameter controls the initial placement strategy for points, which can then be refined by other parameters like Relax iterations. - Random: Places points completely randomly. Fast but can result in clumps and empty spaces. - Grid: Places points in a strict, uniform grid. ### Relax iterations When using Random arrangement, points naturally clump together which creates chaotic noise. To achieve an even, uniform distribution, increase the relax iterations parameter. Examples: - 0 iterations: pure random, chaotic noise. Heavy clumping. - 1-5 iterations: quickly smooths out the worst clumps while remaining organic. - 10+ iterations: creates a highly uniform, structured distribution. ## Distribution methods The Distribution parameter controls how many points are generated, offering several intuitive approaches. ## Placement and quality The Scatter node includes parameters to refine the quality of the point distribution, preventing clumping and breaking up unnatural patterns. ## Point attributes The Scatter node can automatically create and randomize attributes on each point. These attributes are then used by downstream nodes (like Copy to Points) to create visual variety. ### Scale modes The Scale mode parameter provides powerful procedural control over the pscale (point scale) attribute of each point. ## Outliers Outliers allows to create natural visual variation by forcing a specific percentage of scattered points (outliers) to break beyond Scale range limits. - Outlier percent: controls how many points are affected. A value of 5% means 95% of points will use the standard scale range, while 5% will be generated outside of it. - Outlier range: defines the absolute maximum (or minimum) distance the outlier is allowed to stretch beyond the normal limits. - Outlier mode: Add: adds the Outlier range to normal limits. - Multiply: multiplies normal limits by the Outlier range. - Outlier direction: choose whether outliers are allowed to be strictly larger Above max, strictly smaller Below min, or Both. - Outlier seed: changes which specific points are randomly selected as outliers. ## Gradient gizmo When Scale mode is set to Gradient, a visual gizmo can be activated to control the gradient's start and end points directly on the canvas. - Select Scatter node in the graph. - Hover your mouse over the canvas. - Press Enter key to activate the gizmo. --- ### Separate shapes URL: https://animgraphlab.com/docs/nodes/separateShapes Separate Shapes node is a utility for managing multiple shapes. Its main purpouse of a node is indexing shapes. If multiple shapes are provided, it assigns a new, indexed label to each one, making them easy to target with expressions/group node pattern. This is particularly useful after a Copy/Transform node operation that creates multiple shapes, or when you need to procedurally reference items from a Merge node. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Target shape(s) group to separate. If empty, all shapes are affected. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | group | Group | | label | Label | ## Example --- ### Shape along path URL: https://animgraphlab.com/docs/nodes/shapeAlongPath Shape along path node maps any geometry source along the curve of a path source. It can stretch a single shape to fit the path, or repeat it multiple times. ## Parameters | Parameter | Description | | --- | --- | | Label | Display name | | Mode | How geometry is mapped onto the path. | | Composition | Treat all input shapes as a single group or distribute individual shapes (e.g. from Shape Mixer). | | Shapes order | How to cycle through the input shapes. | | Seed | Randomize the shape selection order. | | Deform shape | If enabled, bends the shape to follow the path curve. If disabled, keeps the shape rigid and only rotates it. | | Count | Exact number of copies. | | Spacing | Extra space between repeated items. | | Offset | Slide geometry along the path. | | Normal offset | Distance away from the path center. | | Vertical alignment | How the geometry sits on the path line. | | Scale | Scale of the geometry pieces. | | Reverse | Flip the direction of the path mapping. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | alignY | Vertical alignment | | composition | Composition | | count | Count | | deform | Deform shape | | itemOrder | Shapes order | | label | Label | | mode | Mode | | normalOffset | Normal offset | | offset | Offset | | reverse | Reverse | | scale | Scale | | seed | Seed | | spacing | Spacing | Input: Input 1 The path curve that defines the trajectory. Input: Input 3 The shape(s) to move along that path. ## Modes - Repeat (Fit): Repeats the shape along the path based on the shape's width plus a Spacing value. It fills the path as much as possible. - Repeat (Count): Repeats the shape exactly Count times, distributing them evenly along the path length. - Stretch to Fit: Stretches a single instance of the geometry to cover the entire length of the path. - Single: Places a single instance of the geometry at the start (modified by Offset). ## Geometry Options - Deform Geometry: When enabled (default), the shape bends to conform to the curvature of the path. When disabled (Rigid mode), the shape remains straight but rotates to align with the path's tangent at its center. Rigid mode is useful for mechanical objects like chain links or vehicles. - Composite Input: When enabled, all input shapes are treated as one large object. When disabled, the node treats input shapes as variations (e.g from a Shape Mixer) and can cycle through them sequentially or randomly. ## Tips - To create a chain, use Repeat (Fit) with a Spacing slightly smaller than 0 to overlap links, and disable Deform Geometry. - Styles (Fill, Stroke, Effects) are inherited from the source geometry. - Use the Normal Offset to float the shape above or below the path line. --- ### Shape mixer URL: https://animgraphlab.com/docs/nodes/shape-mixer Shape mixer node preparing multiple shapes for instancing. It takes any number of incoming shapes and assigns unique name (attribute) to them, which can then be used by other nodes like Copy to Points to create complex distributions. Its primary purpose is to assign a name and a weight to each shape. This is especially useful when you want to randomly scatter different types of shapes with varying probabilities. It doesn't change the geometry of the shapes, but it adds metadata that downstream nodes can read. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Mode | Controls how weights are assigned to incoming shapes. | | Pieces | Manually name incoming shapes and set their selection weight. | | Seed | Changes the random outcome. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | label | Label | | mode | Mode | | pieces | Pieces | | seed | Seed | ## Example ## Usage with merge Shape Mixer is designed to work seamlessly with the Merge node. You can connect multiple, separate shape streams into a Merge node, and then connect the single output of the Merge node into the Shape Mixer. The mixer will correctly identify and process each individual shape from the merged stream. > Note: You also can plug any number of shapes into Shape Mixer input itself. --- ### Sharing projects URL: https://animgraphlab.com/docs/ui/dashboard/sharing AnimGraphLab allows to share your project by making it public which generate a shareable link. Anyone with the link can view your project and copy it to their own workspace, and thus edit/modify their own copy. --- ### Smooth URL: https://animgraphlab.com/docs/nodes/smooth The Smooth node relaxes a shape's outline by averaging its points and adjusting its curves. The node can operate on any shape (like Rectangles, Stars, or complex Paths) by first converting its outline into a series of points internally before processing. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Select points/shapes to smooth. If empty, all are affected. | | Iterations | The number of smoothing iterations to apply. Fractional values are supported. | | Strength | The strength of the smoothing effect. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | group | Group | | iterations | Iterations | | label | Label | | strength | Strength | ## Iterations and Strength - Iterations: This controls how many times the two-step smoothing process is repeated. A single iteration will gently soften corners. Higher values will cause the shape to relax more dramatically, often shrinking and becoming more rounded. Fractional values (e.g., 0.5) are supported for very fine-tuned adjustments. - Strength: This determines how much a point and its handles move towards their "ideal" smoothed position in each iteration. A value of 0.5 moves them halfway, while a value of 1.0 moves them all the way. Lower strength values produce a more subtle effect per iteration. ## Practical Use Cases - Creating Organic Shapes: The most common use is to turn a primitive shape, like a Star or Rectangle, into a soft, blob-like form. High iteration counts can produce liquid or amoeba-like effects. - Softening Corners: Use a low iteration count (e.g., 1-3) to quickly round the corners of any shape without the sharp precision of the Bevel node. - Hand-Drawn Look: Applying a very subtle smooth (e.g., 1 iteration with low strength) can break up the perfect lines of computer-generated geometry, giving it a slightly more natural, hand-drawn appearance. --- ### Snippet URL: https://animgraphlab.com/docs/nodes/snippet Snippet node allows to write custom JavaScript to procedurally generate or modify geometry. It acts as an execution sandbox, providing a specialized API for interacting with underlying data that appears on canvas. ## Security Code executes within a restricted, isolated sandbox that is strictly mathematical and geometric. Among applicable restrictions: - Network access: fetch, XMLHttpRequest, and WebSocket are completely blocked. - No DOM or Storage APIs: access to window, document, localStorage, and indexedDB is disabled. - Synchronous execution only: asynchronous APIs like setTimeout, setInterval, requestAnimationFrame, and Promise are not available. - Dynamic imports: loading external scripts via import() or eval() is blocked. ## Core workflow Writing a snippet usually follows a four-step process: generating shapes, modifying their transforms, styling their appearance, and outputting them. ### Generate Use create API to instantiate new geometric shapes. You can pass an object with standard properties (like width, height, or radius) to define the initial geometry. ```javascript let rect = create.rectangle({ width: 100, height: 100 }); ``` ### Modify Once a shape is created, you can use chainable methods to adjust its spatial properties. ```javascript rect.translate(50, 20).rotate(45).scale(1.5, 1.5); ``` ### Style Apply fills, strokes, opacity, blurs, shadows, and blend modes using chainable methods. When defining colors, you can use: - HEX strings: '#ff0055' - CSS rgb()/rgba() functions - Any of standard named CSS colors natively recognized by the browser: 'orange', 'tomato', 'cornflowerblue' If need to set a solid color without additional properties like opacity or blend mode, pass color string directly as a shorthand: ```javascript rect.fill('orange').stroke('black'); ``` If need to pass a detailed configuration object, you can do so like this: ```javascript rect.fill({ color: '#f97316', opacity: 0.8, blendMode: 'normal' }) .stroke({ color: '#ffffff', width: 2, dash: [4, 4], align: 'inside' }) .shadow({ color: '#000', blur: 15, offset: { x: 5, y: 5 }}) ``` ### Output Finally, output the shape so it can be rendered or processed by downstream nodes. ```javascript output.add(rect); ``` > Note: By default, any shape passed into the Snippet node flows right through it. However, if you explicitly call 'output.add(myShape)', auto-passthrough is disabled. If you want to keep the incoming shapes alongside your new ones, you must manually add them via output.add(inputs.shapes, myShape). ## Using built-in nodes You can invoke any visual node's logic directly inside snippet using node() function. This gives access to use complex operations like Boolean, Trim path, and Scatter, etc without writing math yourself, though you can. node() function takes node type name, a property configuration object, and up to three input arrays (primary, secondary, tertiary) matching visual connection inputs. > Note: any parameter omitted from properties (function arguments) will fall back to the node's default value(s). ```javascript // example 1: Performing a Boolean difference (primary and secondary inputs) let box = create.rectangle({ width: 200, height: 200 }); let circle = create.ellipse({ radiusX: 100, radiusY: 100 }).translate(50, 50); let result = node('boolean', { operation: 'difference' }, [box], [circle]); output.add(result); ``` When a node requires specific inputs (like Mask node requiries mask in the tertiary input), pass empty arrays [] for unused inputs: ```javascript // example 2: Masking a Spiral with a Star let op = ui.number('Opacity', 1, 0, 1); let src = create.spiral({ revolutions: 5, endRadius: 80 }).stroke({ color: '#3b82f6', width: 6 }).fill('none'); let m = create.star({ points: 5, outerRadius: 60, innerRadius: 30 }); // mask node inputs: [Foreground], [Background], [Mask] let result = node('mask', { mode: 'normal', opacity: op, swapInputs: false, invertMask: false, bake: false, hardEdge: false, offset: 0 }, [src], [], [m]); // empty array doesnt have a background shape. if you want star to appear, pass [m] to empty [] array output.add(result); ``` ## Dynamic parameters Using ui.number(), ui.color(), ui.dropdown(), ui.toggle(), or ui.ramp() allows to create UI controls that will appear in the Parameters Panel. ```javascript let radius = ui.number('Radius', 50, 10, 100); let color = ui.color('Dot Color', '#ff0055'); let type = ui.dropdown('Type', 'circle', ['circle', 'square']); let shape; if (type === 'circle') { shape = create.ellipse({ radiusX: radius, radiusY: radius }); } else { shape = create.rectangle({ width: radius, height: radius }); } shape.fill(color); output.add(shape); ``` ### Evaluating Ramp input If you create a ramp input using ui.ramp(), you can sample its value at any point/shape along its length using evaluateRamp() function. ```javascript let count = ui.number('Count', 15, 2, 50); let myRamp = ui.ramp('Scale Curve', 1, 0, 5); // 1. base rectangle let rect = create.rectangle({ width: 15, height: 100, color: '#3b82f6' }); // 2. built-in 'Copy and Transform' node to duplicate it let copies = node('copyAndTransform', { totalNumber: count, translate: { x: 20, y: 0 } }, rect); // 3. loop through and apply ramp scale copies.forEach((shape, index) => { let t = index / (count - 1); // Progress from 0.0 to 1.0 let scaleY = evaluateRamp(myRamp, t); // handles enabled state, scalar fallback, and curve interpolation shape.scale(1, scaleY); }); output.add(copies); ``` ## Modifying upstream data Any shape passed into the Snippet node is available in the inputs.shapes collection. This collection can be used to chain methods directly on it to affect all incoming shapes at once. ```javascript // Offset the Y position of all incoming shapes and paint them red let wave = math.sin(time) * ui.number('Wave Height', 20); inputs.shapes.translate(0, wave).fill('#ff0000'); ``` To modify just a single specific shape from the upstream flow, access it via the .items array: ```javascript // target just the first shape connected. 0 = first, 1 = second, etc let firstShape = inputs.shapes.items[0]; // scale it and change its color firstShape.scale(1.5, 1.5).fill('#ff0055'); // auto-passthrough will output all shapes, with only the first one modified ``` You can use incoming shapes to generate entirely new structures. Once you call output.add(), auto-passthrough is disabled, giving you full control over what will be rendered on canvas: ```javascript // Example: Only keep every second shape (filtering) // .filter() returns a new chainable collection let filtered = inputs.shapes.filter((shape, index) => index % 2 === 0); output.add(filtered); ``` If you need unique staggered logic per shape (like index-based offsets), you can use .forEach(): ```javascript // staggered rotation to all incoming shapes let rotationStep = ui.number('Rotation Step', 15); inputs.shapes.forEach((shape, index) => { // array indexes start at 0, add 1 to ensure the first shape also rotates shape.rotate((index + 1) * rotationStep); }); ``` ## Grouping and Group Expanding Snippet API provides methods to group shapes together, allowing to organize procedurally generated geometry so downstream nodes (like Transform or Color) can target them. ### Creating groups To group shapes that created or modified, use output.addGroup(). This creates a selection group without altering the actual geometry: ```javascript let rect1 = create.rectangle({ width: 50, height: 50 }).translate(-30, 0); let rect2 = create.rectangle({ width: 50, height: 50 }).translate(30, 0); // Output the shapes to canvas output.add(rect1, rect2); // Group them under the name "MyBoxes" for downstream targeting output.addGroup('MyBoxes', [rect1, rect2]); ``` ### Group expanding If grouped geometry is coming from upstream and want to expand or manipulate those groups, use node() API to invoke Group Expand node directly: ```javascript // Expand an incoming group named "MyBoxes" by 1 step (e.g. to select adjacent connected shapes) let expanded = node('groupExpand', { group: 'MyBoxes', steps: 1, type: 'shape', // 'shape' expands via spatial proximity, 'point' expands via topological connection replaceOriginal: false, groupName: 'ExpandedBoxes' }, [inputs.shapes]); // Output the result output.add(expanded); ``` ### Complete grouping example A complete example that brings it all together: generating a grid of shapes, creating a core group from a bounding box, expanding that group spatially, and coloring the results. ```javascript // 1. UI controls let count = ui.number('Points Count', 80, 10, 200); let bboxSize = ui.number('BBox Size', 100, 10, 300); let expandSteps = ui.number('Expand Steps', 1, 0, 10, 0.1); // 2. Base geometry let src = create.ellipse({ radiusX: 8, radiusY: 8 }).fill('#333333').stroke('none'); let ptsTarget = create.rectangle({ width: 300, height: 300 }); // 3. Generate points with Scatter node let points = node('scatter', { method: 'fill', distribution: 'count', count: count, seed: 123 }, [ptsTarget]); // 4. Copy shapes onto points let instances = node('copyToPoints', { transformUsingPointAttributes: false }, [src], points); // 5. Group using a bounding box let grouped = node('group', { groupName: 'center_group', group: { groupType: 'bbox', bbox: { size: { width: bboxSize, height: bboxSize }, partialSelection: true } } }, [instances]); // 6. Expand the group let expanded = node('groupExpand', { group: 'center_group', groupName: 'expanded_group', replaceOriginal: false, type: 'shape', steps: expandSteps }, [grouped]); // 7. Color expanded group to red let finalResult = node('color', { group: 'expanded_group', fillColor: '#ff0000' }, [expanded]); // 8. Visual helper let visualBbox = create.rectangle({ width: bboxSize, height: bboxSize }) .fill('none') .stroke({ color: '#00aaff', width: 2, dash: [4, 4] }); // 9. Output everything to the canvas output.add(visualBbox, finalResult); ``` ## Per-Point Animation Snippet nodes can animate individual points of incoming Point Clouds or vertices of shapes using the time or frame variables. They re-evaluate entirely every frame, making it simple to achieve complex topological effects or simulations. Example: Animating a Point Cloud (DNA) If you generate points (e.g., via Scatter) and feed them into a Snippet node, you can iterate over inputs.points to animate their positions per-frame before passing them to a CopyToPoints node. ```javascript let speed = ui.number('Speed', 2); let waveHeight = ui.number('Wave Height', 20); // Animate the Y position of each point like a sine wave inputs.points.forEach(pt => { let offset = pt.position.x * 0.05; // stagger based on X position pt.position.y += math.sin(time * speed + offset) * waveHeight; }); // Output modified points manually output.addPoints(inputs.points); ``` Example: Animating Shape Vertices You can also access and modify the raw vertex data (.points) of a geometric shape directly. Accessing .points automatically bakes primitives (like Rectangles) into editable paths under the hood. ```javascript let shape = inputs.shapes.items[0]; if (shape) { shape.points.forEach((pt, index) => { let offsetX = math.sin(time * 5 + index) * 5; let offsetY = math.cos(time * 5 + index) * 5; // Move anchor pt.x += offsetX; pt.y += offsetY; // Move bezier handles to prevent curve distortion pt.h1x += offsetX; pt.h1y += offsetY; pt.h2x += offsetX; pt.h2y += offsetY; }); } output.add(shape); ``` ## Animation & Interpolation It's possible to create highly dynamic animations using time combined with the snippet API's anim object functions. You also have access to the globally configured project timeline object. ### Adapting to the Timeline Using timeline namespace is crucial when building reusable presets or procedural animations that need to adapt automatically if a user changes the project's length, FPS, or exposure settings. Instead of hardcoding static durations, you can use timeline data to make code adapt. Example 1: Duration-independent progress Calculating a normalized progress ensures animation exactly fits active timeline range, no matter if project framerange is 24 frames or 500 frames long. ```javascript // calculate progress from 0.0 to 1.0 based on current frame relative to timeline bounds let normalizedProgress = (frame - timeline.start) / timeline.durationFrames; // scale will always smoothly animate from 1.0 to 5.0 exactly over full timeline let scaleX = math.lerpNumber(1.0, 5.0, normalizedProgress); output.add(create.rectangle({ width: 50, height: 50 }).scale(scaleX, 1)); ``` Example 2: Time countdown Instead of hardcoding frame counts, timeline.end and timeline.fps lets calculate how much real-world time is left in the animation. This ensures countdown remains accurate even if the frame rate or timeline length changes. ```javascript // calculate remaining seconds let framesRemaining = timeline.end - frame; let secondsRemaining = math.max(0, framesRemaining / timeline.fps); // format to one decimal place (like "5.0") let displayTime = math.round(secondsRemaining, 1); output.add(create.text({ content: "Ends in: " + displayTime + "s", fontSize: 40 })); ``` Example 3: Matching project exposure (stop-motion) If project uses a custom exposure (animating "on 2s" or "on 4s"), you can snap continuous time to match the timeline's step rate. ```javascript // time variable is continuous. Snap it to timeline's exposure intervals let steppedTime = math.floor(time * (timeline.fps / timeline.exposure)) / (timeline.fps / timeline.exposure); // this wave will tick predictably with project's exposure setting let wave = math.sin(steppedTime * math.PI) * 100; output.add(create.ellipse({ radiusX: 20, radiusY: 20 }).translate(0, wave)); ``` > Note: Linear interpolation (math.lerpNumber) is the baseline. All other easing functions mathematically modify the progress (t) before interpolate the final value. ### 1. Linear (Default) Linear interpolation calculates a direct, steady blend between value A and value B based on a normalized progress t (0.0 to 1.0). ```javascript let t = (time % 2) / 2; // Progress goes from 0 to 1 over 2 seconds let x = math.lerpNumber(0, 200, t); // Linearly move X from 0 to 200 output.add(create.rectangle({ width: 50, height: 50 }).translate(x, 0)); ``` ### 2. Cubic bezier (smooth ease) Instead of a straight line, feed t through anim.cubicBezier to create smooth ease-in and ease-out curves. ```javascript let t = (time % 2) / 2; // Ease-in-out curve (CSS equivalent: cubic-bezier(0.25, 0.1, 0.25, 1.0)) let easedT = anim.cubicBezier(t, 0.25, 0.1, 0.25, 1.0); let x = math.lerpNumber(0, 200, easedT); output.add(create.rectangle({ width: 50, height: 50 }).translate(x, 0)); ``` ### 3. Spring (physics-based) For organic bounce effects, create a spring function. > Note: Spring math expects time in milliseconds. ```javascript // Create an ease function with 50% bounce, settling over 1000ms let mySpring = anim.spring({ bounce: 0.5, duration: 1000 }).ease; // Convert time to milliseconds and get our bouncy 't' let tMs = (time % 2) * 1000; let springT = mySpring(tMs); let x = math.lerpNumber(0, 200, springT); output.add(create.rectangle({ width: 50, height: 50 }).translate(x, 0)); ``` ### 4. Step (hold and snap) To create stop-motion, posterize, or hold keyframes, use anim.step() to snap linear t to discrete increments. ```javascript let t = (time % 2) / 2; // Snap 't' to 5 distinct steps (0.0, 0.25, 0.5, 0.75, 1.0) let steppedT = anim.step(t, 5); let x = math.lerpNumber(0, 200, steppedT); output.add(create.rectangle({ width: 50, height: 50 }).translate(x, 0)); ``` ### 5. Cycle (ping-pong & repeat) Easily loop values endlessly without resetting variables manually. ```javascript let cycles = 2; // Loop twice per second // 1. Ping-Pong: Smoothly oscillates between 0 -> 1 -> 0 let pingPongT = anim.pingPong(time, cycles); // 2. Repeat: Jumps back to 0 instantly when it hits 1 let repeatT = anim.repeat(time, cycles); let x = math.lerpNumber(0, 200, pingPongT); output.add(create.rectangle({ width: 50, height: 50 }).translate(x, 0)); ``` ### 6. Noise (organic jiggle) Instead of interpolating between A and B, anim.noise generates continuous, smooth randomness over time. ```javascript let amplitude = ui.number('Noise Amplitude', 20); let frequency = ui.number('Noise Speed', 2); // anim.noise(x, y) returns -1 to 1. Use 'time' as the X axis let jiggle = anim.noise(time * frequency, 0) * amplitude; output.add(create.rectangle({ width: 50, height: 50 }).translate(jiggle, 0)); ``` ## Generative art example Its possible to create and run any algorithm, such as space colonization or branching systems like in the example below: ```javascript // 1. UI Controls let maxNodes = ui.number('Max Nodes', 2000, 100, 5000, 100); let initSeeds = ui.number('Initial Seeds', 9, 1, 50, 1); let startRad = ui.number('Start Radius', 20, 5, 100); let radScale = ui.number('Radius Scale', 0.95, 0.8, 1.0, 0.01); let searchAngle = ui.number('Search Angle (Deg)', 180, 0, 360); let maxAttempts = ui.number('Max Attempts', 15, 1, 50, 1); let boundaryRadius = ui.number('Boundary Radius', 400, 100, 1000); let seedVal = ui.number('Random Seed', 42, 0, 1000, 1); let drawDots = ui.toggle('Draw Nodes', true); let color = ui.color('Color', '#333333'); // 2. Randomness (deterministic) let rndCounter = 0; function getRand() { rndCounter++; return math.seededRandom(seedVal + rndCounter); } // emulate numpy.random.normal() using Box-Muller transform function getNormal() { let u = 1 - getRand(); let v = getRand(); return math.sqrt(-2.0 * Math.log(u)) * math.cos(2.0 * math.PI * v); } // 3. Spatial hashing grid (optimization for collision detection) const cellSize = startRad * 2; const spatialGrid = new Map(); function getGridKey(x, y) { return math.floor(x/cellSize) + ',' + math.floor(y/cellSize); } function addNodeToGrid(n) { let key = getGridKey(n.x, n.y); if (!spatialGrid.has(key)) spatialGrid.set(key, []); spatialGrid.get(key).push(n); } function getNearbyNodes(x, y) { let gx = math.floor(x/cellSize); let gy = math.floor(y/cellSize); let nearby = []; for(let i = -1; i <= 1; i++) { for(let j = -1; j <= 1; j++) { let key = (gx+i) + ',' + (gy+j); if (spatialGrid.has(key)) nearby.push(...spatialGrid.get(key)); } } return nearby; } // 4. Initialize seed nodes let nodes = []; let activeNodes = []; // Nodes that can still branch while (nodes.length < initSeeds) { let x = (getRand() * 2 - 1) * boundaryRadius; let y = (getRand() * 2 - 1) * boundaryRadius; // Ensure seeds start inside the boundary circle if (math.sqrt(x*x + y*y) < boundaryRadius * 0.9) { let n = { x: x, y: y, r: startRad + 0.2 * startRad * (1 - 2 * getRand()), angle: getRand() * math.PI * 2, gen: 1, attempts: 0 }; nodes.push(n); activeNodes.push(n); addNodeToGrid(n); } } // build a single SVG path string for all lines to keep performance good let pathData = ""; // 5. Main generation loop while (nodes.length < maxNodes && activeNodes.length > 0) { // Pick a random active node to branch from let activeIdx = math.floor(getRand() * activeNodes.length); let kNode = activeNodes[activeIdx]; kNode.attempts++; if (kNode.attempts > maxAttempts) { // reached max branching attempts activeNodes.splice(activeIdx, 1); continue; } let newR = kNode.r * radScale; if (newR < 1.0) { // Node dies if it gets too small kNode.attempts = maxAttempts + 1; activeNodes.splice(activeIdx, 1); continue; } let newGen = kNode.gen + 1; let spread = (1.0 - 1.0 / math.pow(newGen + 1, 0.1)); let newAngle = kNode.angle + spread * getNormal() * math.rad(searchAngle); let newX = kNode.x + math.sin(newAngle) * newR; let newY = kNode.y + math.cos(newAngle) * newR; // Check boundary if (math.sqrt(newX*newX + newY*newY) > boundaryRadius) { continue; } // Check collisions against nearby nodes using spatial hash let nearby = getNearbyNodes(newX, newY); let collision = false; for (let other of nearby) { if (other === kNode) continue; // Ignore parent (they touch by definition) let dx = other.x - newX; let dy = other.y - newY; let distSq = dx*dx + dy*dy; let minSpace = other.r + newR; if (distSq * 2 < minSpace * minSpace) { collision = true; break; } } if (!collision) { let newNode = { x: newX, y: newY, r: newR, angle: newAngle, gen: newGen, attempts: 0 }; nodes.push(newNode); activeNodes.push(newNode); addNodeToGrid(newNode); // Add line connecting parent to child pathData += "M " + kNode.x.toFixed(2) + " " + kNode.y.toFixed(2) + " L " + newX.toFixed(2) + " " + newY.toFixed(2) + " "; } } // 6. Output generation // Create the unified branch lines let branchLines = create.path({ d: pathData }).stroke({ color: color, width: 1, linecap: 'round', join: 'round' }).fill('none'); output.add(branchLines); // Optionally create the "Sandpaint" style dots at the joints if (drawDots) { let dots = []; nodes.forEach(n => { let dot = create.ellipse({ radiusX: n.r * 0.35, radiusY: n.r * 0.35 }).translate(n.x, n.y).fill(color).stroke('none'); dots.push(dot); }); // Add all dots as a unified group so downstream nodes can manipulate them together output.addGroup('Nodes', dots); } ``` ## Node parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | ## Snippet API reference ### UI Generation #### ui.number Signature: `ui.number('Label', default?: number, min?: number, max?: number, step?: number)` Returns: `number` Description: Dynamically generates a number slider in the node's parameter panel. Returns the current value of the slider. Example: ```javascript let radius = ui.number('Radius', 50, 10, 100); ``` #### ui.color Signature: `ui.color('Label', defaultHex?: string)` Returns: `string` Description: Dynamically generates a color picker in the node's parameter panel. Returns the selected HEX string. Example: ```javascript let fillCol = ui.color('Shape Color', '#ff0055'); ``` #### ui.toggle Signature: `ui.toggle('Label', default?: boolean)` Returns: `boolean` Description: Dynamically generates a boolean checkbox toggle. Returns true or false. Example: ```javascript if (ui.toggle('Show Outline', false)) { ... } ``` #### ui.text Signature: `ui.text('Label', default?: string)` Returns: `string` Description: Dynamically generates a text input field. Returns the string value. Example: ```javascript let myLabel = ui.text('Label', 'Hello World'); ``` #### ui.dropdown Signature: `ui.dropdown('Label', 'Default', ['Option 1', 'Option 2'])` Returns: `string` Description: Dynamically generates a dropdown menu. Returns the selected string value. Example: ```javascript let mode = ui.dropdown('Mode', 'Add', ['Add', 'Subtract', 'Multiply']); ``` #### ui.ramp Signature: `ui.ramp('Label', default?: number, min?: number, max?: number, step?: number)` Returns: `Record | number` Description: Dynamically generates a ramp/curve editor in the node's parameter panel. Returns the RampData object (or scalar if curve is disabled). Example: ```javascript let myRamp = ui.ramp('Scale Over Time', 1, 0, 5); ``` ### Graph Data #### inputs.shapes Signature: `inputs.shapes` Returns: `ShapeCollection` Description: A chainable collection of all geometric shapes connected to the node's input. Modifying these updates the output unless explicitly calling output.add(). Example: ```javascript inputs.shapes.translate(10, 0).fill('#ff0000'); ``` #### inputs.group Signature: `inputs.group(name: string)` Returns: `ShapeCollection` Description: Retrieves a chainable collection of shapes that belong to a specific group (e.g., created by a Group node or output.addGroup). Example: ```javascript inputs.group('group1').fill('orange'); ``` #### inputs.points Signature: `inputs.points` Returns: `PointAttributes[]` Description: An array of all point cloud data (DNA) connected to the node's input. Modify point positions or attributes in-place. Example: ```javascript inputs.points.forEach(pt => pt.position.y += 10); ``` #### output.add Signature: `output.add(...items: (ShapeWrapper | ShapeCollection | Record)[])` Returns: `void` Description: Outputs generated or modified shapes. Calling this disables auto-passthrough of input shapes. You can pass single shapes, collections, or arrays. Example: ```javascript output.add(myNewRect); ``` #### output.addPoints Signature: `output.addPoints(points: PointAttributes[])` Returns: `void` Description: Outputs a raw array of points as a PointCloud geometry. Calling this disables auto-passthrough. Example: ```javascript output.addPoints(inputs.points); ``` #### output.addGroup Signature: `output.addGroup(name: string, items: (ShapeWrapper | ShapeCollection | Record)[])` Returns: `void` Description: Groups specified shapes into a logical group that can be targeted by downstream nodes (e.g., Transform). Example: ```javascript output.addGroup('My Group', [rect1, rect2]); ``` ### Geometry Creation #### create.rectangle Signature: `create.rectangle(properties: { width?: number, height?: number, cornerRadius?: { tl?: number, tr?: number, bl?: number, br?: number }, color?: string, position?: { x?: number, y?: number }, rotation?: number, scale?: number | { x?: number, y?: number }, opacity?: number, blur?: number })` Returns: `ShapeWrapper` Description: Instantiates a new rectangle. Example: ```javascript let box = create.rectangle({ width: 100, height: 100, color: '#ff0000' }); ``` #### create.ellipse Signature: `create.ellipse(properties: { radiusX?: number, radiusY?: number, color?: string, position?: { x?: number, y?: number }, rotation?: number, scale?: number | { x?: number, y?: number }, opacity?: number, blur?: number })` Returns: `ShapeWrapper` Description: Instantiates a new ellipse. Example: ```javascript let circle = create.ellipse({ radiusX: 50, radiusY: 50, color: '#0073ff' }); ``` #### create.star Signature: `create.star(properties: { points?: number, outerRadius?: number, innerRadius?: number, color?: string, position?: { x?: number, y?: number }, rotation?: number, scale?: number | { x?: number, y?: number }, opacity?: number, blur?: number })` Returns: `ShapeWrapper` Description: Instantiates a new star shape. Example: ```javascript let s = create.star({ points: 5, outerRadius: 50, innerRadius: 25 }); ``` #### create.polygon Signature: `create.polygon(properties: { sides?: number, radius?: number, color?: string, position?: { x?: number, y?: number }, rotation?: number, scale?: number | { x?: number, y?: number }, opacity?: number, blur?: number })` Returns: `ShapeWrapper` Description: Instantiates a new polygon. Example: ```javascript let p = create.polygon({ sides: 6, radius: 50 }); ``` #### create.arrow Signature: `create.arrow(properties: { shaftLength?: number, shaftWidth?: number, headLength?: number, headWidth?: number, color?: string, position?: { x?: number, y?: number }, rotation?: number, scale?: number | { x?: number, y?: number }, opacity?: number, blur?: number })` Returns: `ShapeWrapper` Description: Instantiates a new arrow shape. Example: ```javascript let arr = create.arrow({ shaftLength: 100, shaftWidth: 20 }); ``` #### create.donut Signature: `create.donut(properties: { outerRadius?: number, innerRadius?: number, color?: string, position?: { x?: number, y?: number }, rotation?: number, scale?: number | { x?: number, y?: number }, opacity?: number, blur?: number })` Returns: `ShapeWrapper` Description: Instantiates a new donut shape. Example: ```javascript let d = create.donut({ outerRadius: 50, innerRadius: 30 }); ``` #### create.trapezoid Signature: `create.trapezoid(properties: { topWidth?: number, bottomWidth?: number, height?: number, color?: string, position?: { x?: number, y?: number }, rotation?: number, scale?: number | { x?: number, y?: number }, opacity?: number, blur?: number })` Returns: `ShapeWrapper` Description: Instantiates a new trapezoid shape. Example: ```javascript let t = create.trapezoid({ topWidth: 40, bottomWidth: 80, height: 60 }); ``` #### create.spiral Signature: `create.spiral(properties: { startRadius?: number, endRadius?: number, revolutions?: number, points?: number, spiralType?: string, color?: string, position?: { x?: number, y?: number }, rotation?: number, scale?: number | { x?: number, y?: number }, opacity?: number, blur?: number })` Returns: `ShapeWrapper` Description: Instantiates a new spiral shape. Example: ```javascript let s = create.spiral({ revolutions: 3, endRadius: 100 }); ``` #### create.path Signature: `create.path(properties: { d?: string, color?: string, position?: { x?: number, y?: number }, rotation?: number, scale?: number | { x?: number, y?: number }, opacity?: number, blur?: number })` Returns: `ShapeWrapper` Description: Instantiates a new SVG path. Example: ```javascript let p = create.path({ d: 'M0,0 L100,100' }); ``` #### create.text Signature: `create.text(properties: { content?: string, fontSize?: number, fontFamily?: string, letterSpacing?: number, lineHeight?: number, align?: string, color?: string, position?: { x?: number, y?: number }, rotation?: number, scale?: number | { x?: number, y?: number }, opacity?: number, blur?: number })` Returns: `ShapeWrapper` Description: Instantiates a new text shape. Example: ```javascript let t = create.text({ content: 'Hello', fontSize: 48, color: '#ff0000' }); ``` #### translate Signature: `shape.translate(x: number, y: number)` Returns: `ShapeWrapper` Description: A chainable method that moves a shape by X and Y coordinates. Example: ```javascript myShape.translate(50, 0).rotate(45); ``` #### rotate Signature: `shape.rotate(angleDegrees: number)` Returns: `ShapeWrapper` Description: A chainable method that rotates a shape by the specified degrees. Example: ```javascript myShape.rotate(time * 90); ``` #### scale Signature: `shape.scale(x: number, y: number)` Returns: `ShapeWrapper` Description: A chainable method that scales a shape uniformly or non-uniformly. Example: ```javascript myShape.scale(1.5, 1.5); ``` #### opacity Signature: `shape.opacity(value: number)` Returns: `ShapeWrapper` Description: A chainable method that sets the opacity of the shape (0 to 1). Example: ```javascript myShape.opacity(0.5); ``` #### blur Signature: `shape.blur(amount: number)` Returns: `ShapeWrapper` Description: A chainable method that applies a Gaussian blur to the shape. Example: ```javascript myShape.blur(10); ``` #### blendMode Signature: `shape.blendMode(mode: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity')` Returns: `ShapeWrapper` Description: A chainable method that sets the CSS blend mode of the shape. Example: ```javascript myShape.blendMode('multiply'); ``` #### fill Signature: `shape.fill(options: string | { color?: string, opacity?: number, blendMode?: string })` Returns: `ShapeWrapper` Description: A chainable method that adds or updates the primary fill layer of a shape. Accepts a HEX color string or an options object. Example: ```javascript myShape.fill({ color: '#ff0000', opacity: 0.5 }); ``` #### stroke Signature: `shape.stroke(options: string | { color?: string, width?: number, opacity?: number, dash?: number[], dashSpacing?: number, join?: string, linecap?: string, align?: string }, width?: number)` Returns: `ShapeWrapper` Description: A chainable method that adds or updates the primary stroke layer of a shape. Example: ```javascript myShape.stroke({ color: '#ffffff', width: 2, dash: [4, 4], align: 'inside' }); ``` #### linearGradient Signature: `shape.linearGradient(options: { stops: {color: string, offset?: number}[], start?: {x: number, y: number}, end?: {x: number, y: number}, targetLayer?: 'fill' | 'stroke', blendMode?: string })` Returns: `ShapeWrapper` Description: A chainable method that applies a local linear gradient. Offsets use 0.0 to 1.0 (0% to 100%). If offsets are omitted, colors are spaced evenly. Example: ```javascript myShape.linearGradient({ stops: [{color: '#ff0055'}, {color: '#0073ff'}], start: {x: 0, y: 0}, end: {x: 1, y: 1} }); ``` #### radialGradient Signature: `shape.radialGradient(options: { stops: {color: string, offset?: number}[], center?: {x: number, y: number}, radius?: number, targetLayer?: 'fill' | 'stroke', blendMode?: string })` Returns: `ShapeWrapper` Description: A chainable method that applies a local radial gradient. Center and radius use normalized coordinates (0.0 to 1.0). Example: ```javascript myShape.radialGradient({ stops: [{color: '#ffe72d'}, {color: '#ff0055'}], center: {x: 0.5, y: 0.5}, radius: 0.5 }); ``` #### shadow Signature: `shape.shadow(options: { color?: string, blur?: number, offset?: {x: number, y: number}, opacity?: number })` Returns: `ShapeWrapper` Description: A chainable method that adds a drop shadow to the shape. Example: ```javascript myShape.shadow({ color: '#000000', blur: 10, offset: {x: 5, y: 5} }); ``` #### innerShadow Signature: `shape.innerShadow(options: { color?: string, blur?: number, offset?: {x: number, y: number}, opacity?: number })` Returns: `ShapeWrapper` Description: A chainable method that adds an inner shadow to the shape. Same options as shadow(). Example: ```javascript myShape.innerShadow({ color: '#ffffff', blur: 5 }); ``` ### Context Variables #### time Signature: `time` Returns: `number` Description: The current global animation time in seconds. Example: ```javascript let wave = math.sin(time); ``` #### frame Signature: `frame` Returns: `number` Description: The current global animation frame number. Example: ```javascript if (frame === 10) { ... } ``` #### timeline.fps Signature: `timeline.fps` Returns: `number` Description: The frames per second of the current project animation settings. Example: ```javascript let frameStep = 1 / timeline.fps; ``` #### timeline.start Signature: `timeline.start` Returns: `number` Description: The starting frame of the timeline range. Example: ```javascript let loopFrame = timeline.start; ``` #### timeline.end Signature: `timeline.end` Returns: `number` Description: The ending frame of the timeline range. Example: ```javascript let loopFrame = timeline.end; ``` #### timeline.exposure Signature: `timeline.exposure` Returns: `number` Description: The timeline exposure (frames to hold each evaluated value). Example: ```javascript let playSpeed = 1 / timeline.exposure; ``` #### timeline.duration Signature: `timeline.duration` Returns: `number` Description: The duration of the active timeline range in seconds. Example: ```javascript let progress = time / timeline.duration; ``` #### timeline.durationFrames Signature: `timeline.durationFrames` Returns: `number` Description: The duration of the active timeline range in frames. Example: ```javascript let progress = frame / timeline.durationFrames; ``` ### Animation #### anim.step Signature: `anim.step(t: number, steps?: number)` Returns: `number` Description: Snaps the progress value (t) to discrete increments. Great for posterize or hold keyframe effects. Example: ```javascript let snappedT = anim.step(t, 5); ``` #### anim.pingPong Signature: `anim.pingPong(t: number, cycles?: number)` Returns: `number` Description: Takes a continuous progress value and bounces it back and forth continuously (0 -> 1 -> 0). Example: ```javascript let oscillatingT = anim.pingPong(time, 2); ``` #### anim.repeat Signature: `anim.repeat(t: number, cycles?: number)` Returns: `number` Description: Takes a continuous progress value and wraps it endlessly from 0 to 1. Example: ```javascript let loopingT = anim.repeat(time, 3); ``` #### anim.spring Signature: `anim.spring(options?: { bounce?: number, duration?: number, mass?: number, stiffness?: number, damping?: number, velocity?: number })` Returns: `{ ease: (t: number) => number, duration: number }` Description: Creates a physically-based spring easing function. The returned ease function expects time (t) in milliseconds. Example: ```javascript let mySpring = anim.spring({ bounce: 0.5, duration: 1000 }).ease; let val = mySpring(time * 1000); ``` #### anim.cubicBezier Signature: `anim.cubicBezier(t: number, p1x: number, p1y: number, p2x: number, p2y: number)` Returns: `number` Description: Evaluates a cubic bezier easing curve for a normalized time t (0 to 1). Example: ```javascript let easedT = anim.cubicBezier(t, 0.25, 0.1, 0.25, 1); ``` #### anim.noise Signature: `anim.noise(x: number, y: number, seed?: number)` Returns: `number` Description: Generates 2D Simplex noise. Returns a value between -1 and 1. Example: ```javascript let n = anim.noise(px * 0.1, py * 0.1, 42); ``` ### Math #### evaluateRamp Signature: `evaluateRamp(rampData: Record | number, t: number)` Returns: `number` Description: Evaluates a Ramp object at a specific normalized position (t) between 0.0 and 1.0. Handles curve interpolation, scalar fallback, and enabled/disabled states. Example: ```javascript let scaleY = evaluateRamp(myRamp, t); ``` #### math.PI Signature: `math.PI` Returns: `number` Description: The ratio of the circumference of a circle to its diameter (approx. 3.14159). Example: ```javascript let radians = degrees * (math.PI / 180); ``` #### math.E Signature: `math.E` Returns: `number` Description: Euler's number, the base of natural logarithms (approx. 2.718). Example: ```javascript let v = math.pow(math.E, 2); ``` #### math.abs Signature: `math.abs(x: number)` Returns: `number` Description: Returns the absolute value of a number. Example: ```javascript let positive = math.abs(-10); // 10 ``` #### math.floor Signature: `math.floor(x: number)` Returns: `number` Description: Returns the largest integer less than or equal to a number. Example: ```javascript let rounded = math.floor(3.7); // 3 ``` #### math.ceil Signature: `math.ceil(x: number)` Returns: `number` Description: Returns the smallest integer greater than or equal to a number. Example: ```javascript let rounded = math.ceil(3.1); // 4 ``` #### math.round Signature: `math.round(v: number, decimals?: number)` Returns: `number` Description: Returns the value of a number rounded to a specific number of decimal places. Example: ```javascript let rounded = math.round(3.555, 1); // 3.6 ``` #### math.min Signature: `math.min(...values: number[])` Returns: `number` Description: Returns the smallest of zero or more numbers. Example: ```javascript let smallest = math.min(10, 20, 5); // 5 ``` #### math.max Signature: `math.max(...values: number[])` Returns: `number` Description: Returns the largest of zero or more numbers. Example: ```javascript let largest = math.max(10, 20, 5); // 20 ``` #### math.pow Signature: `math.pow(base: number, exponent: number)` Returns: `number` Description: Returns the base to the exponent power. Example: ```javascript let val = math.pow(2, 3); // 8 ``` #### math.sqrt Signature: `math.sqrt(x: number)` Returns: `number` Description: Returns the square root of a number. Example: ```javascript let val = math.sqrt(16); // 4 ``` #### math.sin Signature: `math.sin(angle: number)` Returns: `number` Description: Returns the sine of a number. Example: ```javascript let val = math.sin(math.PI / 2); // 1 ``` #### math.cos Signature: `math.cos(angle: number)` Returns: `number` Description: Returns the cosine of a number. Example: ```javascript let val = math.cos(math.PI); // -1 ``` #### math.tan Signature: `math.tan(angle: number)` Returns: `number` Description: Returns the tangent of a number. Example: ```javascript let val = math.tan(math.PI / 4); // 1 ``` #### math.asin Signature: `math.asin(x: number)` Returns: `number` Description: Returns the arcsine of a number. Example: ```javascript let angle = math.asin(1); // 1.5707963267948966 ``` #### math.acos Signature: `math.acos(x: number)` Returns: `number` Description: Returns the arccosine of a number. Example: ```javascript let angle = math.acos(1); // 0 ``` #### math.atan Signature: `math.atan(x: number)` Returns: `number` Description: Returns the arctangent of a number. Example: ```javascript let angle = math.atan(1); // 0.7853981633974483 ``` #### math.atan2 Signature: `math.atan2(y: number, x: number)` Returns: `number` Description: Returns the arctangent of the quotient of its arguments. Example: ```javascript let angle = math.atan2(10, 10); // 0.7853981633974483 ``` #### math.deg Signature: `math.deg(radians: number)` Returns: `number` Description: Converts radians to degrees. Example: ```javascript let d = math.deg(math.PI); // 180 ``` #### math.rad Signature: `math.rad(degrees: number)` Returns: `number` Description: Converts degrees to radians. Example: ```javascript let r = math.rad(180); // 3.14159 ``` #### math.distance Signature: `math.distance(p1: {x: number, y: number}, p2: {x: number, y: number})` Returns: `number` Description: Calculates the Euclidean distance between two points. Example: ```javascript let d = math.distance({x: 0, y: 0}, {x: 100, y: 100}); ``` #### math.lerp Signature: `math.lerp(t: number, p1: {x: number, y: number}, p2: {x: number, y: number})` Returns: `{x: number, y: number}` Description: Linearly interpolates between two points. Example: ```javascript let mid = math.lerp(0.5, ptA, ptB); ``` #### math.lerpNumber Signature: `math.lerpNumber(a: number, b: number, t: number)` Returns: `number` Description: Linearly interpolates between two numbers. Example: ```javascript let val = math.lerpNumber(0, 100, 0.5); // 50 ``` #### math.map Signature: `math.map(v: number, inMin: number, inMax: number, outMin: number, outMax: number)` Returns: `number` Description: Maps a value from a source range to a target range. Example: ```javascript let scaled = math.map(0.5, 0, 1, 0, 100); // 50 ``` #### math.clamp Signature: `math.clamp(value: number, min: number, max: number)` Returns: `number` Description: Constrains a number to be within a specific range. Example: ```javascript let safeRad = math.clamp(radius, 10, 100); ``` #### math.seededRandom Signature: `math.seededRandom(seed: number)` Returns: `number` Description: Returns a deterministic pseudo-random number between 0 and 1 based on the seed. Example: ```javascript let r = math.seededRandom(42); ``` ### Logic #### if Signature: `if (condition) { ... }` Description: Executes a block of code if a specified condition is true. Example: ```javascript if (radius > 10) { ... } ``` #### for Signature: `for (let i = 0; i < count; i++) { ... }` Description: Repeats a block of code a specified number of times. Example: ```javascript for (let i = 0; i < 10; i++) { ... } ``` #### while Signature: `while (condition) { ... }` Description: Repeats a block of code as long as a specified condition is true. Example: ```javascript while (x < 100) { ... } ``` #### forEach Signature: `array.forEach((item, index) => { ... })` Description: Executes a provided function once for each array element. Example: ```javascript inputs.shapes.forEach(s => s.rotate(45)); ``` ### Built-in Nodes #### node Signature: `node(type: string, properties: Record, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[], tertiaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Runs any built-in node evaluator natively. It processes provided input shape arrays using the properties, exactly as if connected in the nodegraph. Example: ```javascript node('trimPath', { start: 0.1, end: 0.9 }, [myPath]).stroke('#fff'); ``` #### node('artboard') Signature: `node(type: 'artboard', properties?: { position?: { x?: number, y?: number }, size?: { width?: number, height?: number, proportional?: boolean }, scaleContent?: boolean, referenceSize?: { width?: number, height?: number, proportional?: boolean }, backgroundVisible?: boolean, backgroundType?: 'solid' | 'linear' | 'radial', backgroundColor?: string, gradientStops?: { color?: string, offset?: number }[], gradientStart?: { x?: number, y?: number }, gradientEnd?: { x?: number, y?: number }, gradientCenter?: { x?: number, y?: number }, gradientRadius?: number, centerContent?: boolean, resizeToFit?: boolean, padding?: number, fitOffset?: { x?: number, y?: number }, watermarkEnabled?: boolean, watermarkSrc?: string, watermarkPlacement?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center', watermarkOpacity?: number, watermarkScale?: number, watermarkPadding?: number, watermarkFileName?: string, watermarkIsSvg?: boolean, watermarkIsSvgZ?: boolean, watermarkOriginalWidth?: number, watermarkOriginalHeight?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Artboard node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('artboard', { position: { x: 0, y: 0 }, size: { width: 500, height: 500, proportional: true }, scaleContent: false, referenceSize: { width: 500, height: 500, proportional: true }, backgroundVisible: true, backgroundType: 'solid', backgroundColor: '#f0f0f0', gradientStops: [{ color: '#ffffff', offset: 0 }, { color: '#000000', offset: 1 }], gradientStart: { x: 0, y: 0.5 }, gradientEnd: { x: 1, y: 0.5 }, gradientCenter: { x: 0.5, y: 0.5 }, gradientRadius: 0.5, centerContent: false, resizeToFit: false, padding: 1, fitOffset: { x: 0, y: 0 }, watermarkEnabled: false, watermarkSrc: '', watermarkPlacement: 'bottom-center', watermarkOpacity: 0.5, watermarkScale: 1, watermarkPadding: 20, watermarkFileName: '', watermarkIsSvg: false, watermarkIsSvgZ: false, watermarkOriginalWidth: 100, watermarkOriginalHeight: 100 }, [inputs.shapes]); output.add(result); ``` #### node('artboardMerge') Signature: `node(type: 'artboardMerge', properties?: { columns?: number, rows?: number, paddingX?: number, paddingY?: number, backgroundColor?: string, backgroundVisible?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Artboard Merge node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('artboardMerge', { columns: 3, rows: 3, paddingX: 20, paddingY: 20, backgroundColor: '#f0f0f0', backgroundVisible: true }, [inputs.shapes]); output.add(result); ``` #### node('attributeCopy') Signature: `node(type: 'attributeCopy', properties?: { group?: string, attributeClass?: 'shape' | 'point', attributeName?: string, newName?: string }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Attribute Copy node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('attributeCopy', { group: '', attributeClass: 'point', attributeName: '', newName: '' }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('attributeCreate') Signature: `node(type: 'attributeCreate', properties?: { group?: string, attributeClass?: 'shape' | 'point', attributeName?: string, attributeType?: 'number' | 'string' | 'color' | 'boolean', numberValue?: number, stringValue?: string, colorValue?: string, booleanValue?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Attribute Create node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('attributeCreate', { group: '', attributeClass: 'point', attributeName: 'myAttr', attributeType: 'number', numberValue: 0, stringValue: '', colorValue: '#ffffff', booleanValue: true }, [inputs.shapes]); output.add(result); ``` #### node('attributeDelete') Signature: `node(type: 'attributeDelete', properties?: { group?: string, attributeClass?: 'shape' | 'point', attributeName?: string, deleteMode?: 'delete' | 'keep' }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Attribute Delete node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('attributeDelete', { group: '', attributeClass: 'point', attributeName: '', deleteMode: 'delete' }, [inputs.shapes]); output.add(result); ``` #### node('attributePromote') Signature: `node(type: 'attributePromote', properties?: { group?: string, originalClass?: 'shape' | 'point', newClass?: 'shape' | 'point', originalName?: string, newName?: string, promotionMethod?: 'average' | 'maximum' | 'minimum' | 'sum' | 'first', deleteOriginal?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Attribute Promote node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('attributePromote', { group: '', originalClass: 'point', newClass: 'shape', originalName: '', newName: '', promotionMethod: 'average', deleteOriginal: true }, [inputs.shapes]); output.add(result); ``` #### node('attributeRandomize') Signature: `node(type: 'attributeRandomize', properties?: { mode?: 'points' | 'shapes', targetParam?: 'attribute' | 'parameter', group?: string, attributeName?: string, attributeSettings?: any[], operation?: 'set' | 'add' | 'multiply', distribution?: 'random' | 'noise', minFloat?: number, maxFloat?: number, minRotation?: number, maxRotation?: number, minColor?: string, maxColor?: string, frequency?: number, offset?: { x?: number, y?: number }, seed?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Attribute Randomize node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('attributeRandomize', { mode: 'points', targetParam: 'attribute', group: '', attributeName: 'myAttr', attributeSettings: [], operation: 'set', distribution: 'random', minFloat: 0, maxFloat: 1, minRotation: 0, maxRotation: 360, minColor: '#ffffff', maxColor: '#000000', frequency: 1, offset: { x: 0, y: 0 }, seed: 0 }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('attributeRemap') Signature: `node(type: 'attributeRemap', properties?: { group?: string, attributeClass?: 'shape' | 'point', attributeName?: string, newName?: string, deleteOriginal?: boolean, inputMin?: number, inputMax?: number, useCurve?: boolean, outputMin?: number, outputMax?: number, ramp?: { enabled?: boolean, value?: number, points?: { x?: number, y?: number }[], interpolation?: string } }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Attribute Remap node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('attributeRemap', { group: '', attributeClass: 'point', attributeName: '', newName: '', deleteOriginal: false, inputMin: 0, inputMax: 1, useCurve: false, outputMin: 0, outputMax: 1, ramp: { enabled: true, value: 1, points: [{ x: 0, y: 0 }, { x: 1, y: 1 }], interpolation: 'smooth' } }, [inputs.shapes]); output.add(result); ``` #### node('attributeRename') Signature: `node(type: 'attributeRename', properties?: { group?: string, attributeClass?: 'shape' | 'point', oldName?: string, newName?: string, deleteOriginal?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Attribute Rename node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('attributeRename', { group: '', attributeClass: 'point', oldName: '', newName: '', deleteOriginal: true }, [inputs.shapes]); output.add(result); ``` #### node('attributeTransfer') Signature: `node(type: 'attributeTransfer', properties?: { group?: string, attributeClass?: 'shape' | 'point', attributeName?: string, distanceThreshold?: number, blendWidth?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Attribute Transfer node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('attributeTransfer', { group: '', attributeClass: 'point', attributeName: '', distanceThreshold: 50, blendWidth: 0 }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('bend') Signature: `node(type: 'bend', properties?: { group?: string, composition?: 'individual' | 'combined', mode?: 'freeform' | 'arch' | 'bulge' | 'spherize' | 'flag' | 'wave' | 'fish' | 'rise' | 'squeeze' | 'twist', bendAngle?: number, captureOrigin?: { x?: number, y?: number }, captureDirection?: number, captureLength?: number, deformInBothDirections?: boolean, preservePoints?: boolean, resampleLength?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Bend node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('bend', { group: '', composition: 'individual', mode: 'freeform', bendAngle: 45, captureOrigin: { x: 0, y: 0 }, captureDirection: 90, captureLength: 100, deformInBothDirections: false, preservePoints: false, resampleLength: 5 }, [inputs.shapes]); output.add(result); ``` #### node('bevel') Signature: `node(type: 'bevel', properties?: { group?: string, mode?: 'round' | 'chamfer', amount?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Bevel node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('bevel', { group: '', mode: 'round', amount: 10 }, [inputs.shapes]); output.add(result); ``` #### node('blend') Signature: `node(type: 'blend', properties?: { mode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity', opacity?: number, swapInputs?: boolean, groupBlur?: number, enableThreshold?: boolean, alphaThreshold?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Blend node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('blend', { mode: 'normal', opacity: 1, swapInputs: false, groupBlur: 0, enableThreshold: false, alphaThreshold: 0.5 }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('blur') Signature: `node(type: 'blur', properties?: { group?: string, applyTo?: 'individual' | 'group', blurAmount?: number, angle?: number, start?: { x?: number, y?: number }, end?: { x?: number, y?: number } }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Blur node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('blur', { group: '', applyTo: 'individual', blurAmount: 5, angle: 0, start: { x: 0.5, y: 0 }, end: { x: 0.5, y: 1 } }, [inputs.shapes]); output.add(result); ``` #### node('boolean') Signature: `node(type: 'boolean', properties?: { operation?: 'union' | 'difference' | 'intersection' | 'exclusion', outputGroups?: { createSeamGroups?: boolean, abSeamGroupName?: string, baSeamGroupName?: string } }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Boolean node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('boolean', { operation: 'union', outputGroups: { createSeamGroups: true, abSeamGroupName: 'Cutter Seam', baSeamGroupName: 'Source Seam' } }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('bounds') Signature: `node(type: 'bounds', properties?: { group?: string, mode?: 'individual' | 'combined', boundsType?: 'aabb' | 'obb' | 'convexHull' | 'concave', padding?: number, keepHoles?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Bounds node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('bounds', { group: '', mode: 'individual', boundsType: 'aabb', padding: 0, keepHoles: false }, [inputs.shapes]); output.add(result); ``` #### node('clip') Signature: `node(type: 'clip', properties?: { group?: string, keep?: 'above' | 'below', origin?: { x?: number, y?: number }, direction?: number, distance?: number, resample?: number, createSeamGroup?: boolean, seamGroupName?: string }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Clip node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('clip', { group: '', keep: 'above', origin: { x: 0, y: 0 }, direction: 90, distance: 0, resample: 0, createSeamGroup: false, seamGroupName: 'clip_seam' }, [inputs.shapes]); output.add(result); ``` #### node('color') Signature: `node(type: 'color', properties?: { group?: string, colorMode?: 'single' | 'range', rangeMode?: 'index' | 'custom', rangeDriver?: number, reverseRange?: boolean, applyFill?: boolean, fillColor?: string, fillColorStops?: { color?: string, offset?: number }[], applyStroke?: boolean, strokeColor?: string, strokeColorStops?: { color?: string, offset?: number }[], blendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity' }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Color node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('color', { group: '', colorMode: 'single', rangeMode: 'index', rangeDriver: 0, reverseRange: false, applyFill: true, fillColor: '#ffffff', fillColorStops: [{ color: '#ffffff', offset: 0 }, { color: '#000000', offset: 1 }], applyStroke: false, strokeColor: '#333333', strokeColorStops: [{ color: '#ffffff', offset: 0 }, { color: '#000000', offset: 1 }], blendMode: 'normal' }, [inputs.shapes]); output.add(result); ``` #### node('controller') Signature: `node(type: 'controller', properties?: {})` Returns: `ShapeCollection` Description: Evaluates Controller node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('controller', {}); output.add(result); ``` #### node('copyAndTransform') Signature: `node(type: 'copyAndTransform', properties?: { outputMode?: 'individual' | 'combined', distribution?: 'linear' | 'radial', totalNumber?: number, columns?: number, translate?: { x?: number, y?: number }, rowTranslate?: { x?: number, y?: number }, radius?: number, startAngle?: number, totalAngle?: number, alignRotation?: boolean, rotate?: number, scale?: { x?: number, y?: number }, uniformScale?: number, pivot?: { x?: number, y?: number }, accumulateScale?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Copy/Transform node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('copyAndTransform', { outputMode: 'individual', distribution: 'linear', totalNumber: 10, columns: 1, translate: { x: 50, y: 0 }, rowTranslate: { x: 0, y: 100 }, radius: 100, startAngle: 0, totalAngle: 360, alignRotation: true, rotate: 0, scale: { x: 1, y: 1 }, uniformScale: 1, pivot: { x: 0, y: 0 }, accumulateScale: true }, [inputs.shapes]); output.add(result); ``` #### node('copyToPoints') Signature: `node(type: 'copyToPoints', properties?: { group?: string, mode?: 'single shape' | 'random variant', seed?: number, transformUsingPointAttributes?: boolean, attributeTargets?: any[], outputMode?: 'individual' | 'combined' }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Copy to Points node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('copyToPoints', { group: '', mode: 'single shape', seed: 0, transformUsingPointAttributes: true, attributeTargets: [], outputMode: 'individual' }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('delete') Signature: `node(type: 'delete', properties?: { group?: string, groupType?: 'shape' | 'point', invert?: boolean, heal?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Delete node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('delete', { group: '', groupType: 'shape', invert: false, heal: false }, [inputs.shapes]); output.add(result); ``` #### node('export') Signature: `node(type: 'export', properties?: { fileName?: string, _hasAnimation?: boolean, format?: 'svg_static' | 'png' | 'jpg' | 'webp', formatAnimated?: 'svg_static' | 'svg' | 'svg_interactive' | 'mp4' | 'png' | 'jpg' | 'webp', quality?: number, withWatermark?: boolean, limitResolution?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Export node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('export', { fileName: 'render', _hasAnimation: false, format: 'svg_static', formatAnimated: 'svg_static', quality: 90, withWatermark: false, limitResolution: true }, [inputs.shapes]); output.add(result); ``` #### node('extractCenter') Signature: `node(type: 'extractCenter', properties?: { group?: string, placement?: 'center' | 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right', offset?: { x?: number, y?: number } }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Extract Center node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('extractCenter', { group: '', placement: 'center', offset: { x: 0, y: 0 } }, [inputs.shapes]); output.add(result); ``` #### node('extrude') Signature: `node(type: 'extrude', properties?: { group?: string, preset?: 'custom' | 'off-axis-front' | 'off-axis-back' | 'off-axis-left' | 'off-axis-right' | 'off-axis-top' | 'off-axis-bottom' | 'isometric-left' | 'isometric-right' | 'isometric-top' | 'isometric-bottom', depth?: number, rotateX?: number, rotateY?: number, rotateZ?: number, perspective?: number, fidelity?: number, lightAzimuth?: number, lightElevation?: number, outputGroups?: { createFaceGroups?: boolean, frontGroupName?: string, backGroupName?: string, sideGroupName?: string, topGroupName?: string, bottomGroupName?: string, leftGroupName?: string, rightGroupName?: string } }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Extrude 3D node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('extrude', { group: '', preset: 'custom', depth: 50, rotateX: -20, rotateY: 30, rotateZ: 0, perspective: 0, fidelity: 50, lightAzimuth: -45, lightElevation: 30, outputGroups: { createFaceGroups: true, frontGroupName: 'front', backGroupName: 'back', sideGroupName: 'side', topGroupName: 'top', bottomGroupName: 'bottom', leftGroupName: 'left', rightGroupName: 'right' } }, [inputs.shapes]); output.add(result); ``` #### node('falloff') Signature: `node(type: 'falloff', properties?: { position?: { x?: number, y?: number }, shape?: 'radial' | 'linear', innerRadius?: number, outerRadius?: number, angle?: number, attributeName?: string, ramp?: { enabled?: boolean, value?: number, points?: { x?: number, y?: number }[], interpolation?: string } }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Falloff node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('falloff', { position: { x: 0, y: 0 }, shape: 'radial', innerRadius: 50, outerRadius: 250, angle: 0, attributeName: 'weight', ramp: { enabled: false, value: 0, points: [{ x: 0, y: 0 }, { x: 1, y: 1 }], interpolation: 'smooth' } }, [inputs.shapes]); output.add(result); ``` #### node('freeformGradient') Signature: `node(type: 'freeformGradient', properties?: { group?: string, targetLayer?: 'fill' | 'stroke', baseColor?: string, gradientPoints?: { x?: number, y?: number, color?: string, radius?: number }[], smoothing?: number, blendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity' }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Freeform Gradient node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('freeformGradient', { group: '', targetLayer: 'fill', baseColor: '#ffffff', gradientPoints: [{ x: 0.2, y: 0.2, color: '#ff0000', radius: 0.6 }, { x: 0.8, y: 0.8, color: '#0000ff', radius: 0.6 }], smoothing: 50, blendMode: 'normal' }, [inputs.shapes]); output.add(result); ``` #### node('group') Signature: `node(type: 'group', properties?: { groupName?: string, baseGroup?: string, mergeOp?: 'replace' | 'union' | 'intersect' | 'subtract', group?: { groupType?: string, selectMode?: string, pattern?: string, selection?: any[], bbox?: { position?: { x?: number, y?: number }, size?: { width?: number, height?: number }, partialSelection?: boolean, matchBounds?: boolean, falloff?: number }, random?: { seed?: number, probability?: number }, percent?: { value?: number, mode?: string } } }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Group node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('group', { groupName: 'group1', baseGroup: '', mergeOp: 'replace', group: { groupType: 'manual', selectMode: 'shape', pattern: '*', selection: [], bbox: { position: { x: 0, y: 0 }, size: { width: 100, height: 100 }, partialSelection: false, matchBounds: false, falloff: 0 }, random: { seed: 0, probability: 0.5 }, percent: { value: 50, mode: 'start' } } }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('groupExpand') Signature: `node(type: 'groupExpand', properties?: { group?: string, replaceOriginal?: boolean, groupName?: string, steps?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Group Expand node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('groupExpand', { group: '', replaceOriginal: false, groupName: 'expanded_group', steps: 1 }, [inputs.shapes]); output.add(result); ``` #### node('groupInvert') Signature: `node(type: 'groupInvert', properties?: { group?: string, replaceOriginal?: boolean, groupName?: string, selectMode?: 'shape' | 'point' }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Group Invert node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('groupInvert', { group: '', replaceOriginal: false, groupName: 'inverted_group', selectMode: 'shape' }, [inputs.shapes]); output.add(result); ``` #### node('hatch') Signature: `node(type: 'hatch', properties?: { group?: string, outputMode?: 'individual' | 'combined', hatchType?: 'hatch' | 'crosshatch' | 'scribble' | 'zigzag' | 'shortDashes' | 'stamping', angle?: number, spacingMode?: 'uniform' | 'gradient', spacing?: number, maxSpacing?: number, gradientStart?: { x?: number, y?: number }, gradientEnd?: { x?: number, y?: number }, dashLength?: number, offset?: number, thickness?: number, color?: string, useShapeColor?: boolean, keepOriginal?: boolean, angleJitter?: number, spacingJitter?: number, dashLengthJitter?: number, waviness?: number, waveFrequency?: number, resample?: number, seed?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Hatch node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('hatch', { group: '', outputMode: 'individual', hatchType: 'hatch', angle: 45, spacingMode: 'uniform', spacing: 10, maxSpacing: 40, gradientStart: { x: 0, y: 0.5 }, gradientEnd: { x: 1, y: 0.5 }, dashLength: 15, offset: 0, thickness: 2, color: '#000000', useShapeColor: false, keepOriginal: false, angleJitter: 0, spacingJitter: 0, dashLengthJitter: 0, waviness: 0, waveFrequency: 5, resample: 5, seed: 0 }, [inputs.shapes]); output.add(result); ``` #### node('import') Signature: `node(type: 'import', properties?: { sourceFile?: string, sourceUrl?: string, position?: { x?: number, y?: number }, size?: { width?: number, height?: number }, sizeLinked?: boolean, scale?: { x?: number, y?: number }, rotation?: number, opacity?: number, blur?: number, fileName?: string, isSvg?: boolean, isCsv?: boolean, originalWidth?: number, originalHeight?: number })` Returns: `ShapeCollection` Description: Evaluates Import node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('import', { sourceFile: '', sourceUrl: '', position: { x: 0, y: 0 }, size: { width: 100, height: 100 }, sizeLinked: true, scale: { x: 1, y: 1 }, rotation: 0, opacity: 1, blur: 0, fileName: '', isSvg: false, isCsv: false, originalWidth: 100, originalHeight: 100 }); output.add(result); ``` #### node('interpolate') Signature: `node(type: 'interpolate', properties?: { inputOrder?: any[], steps?: number, easing?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut', includeEnds?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Interpolate node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('interpolate', { inputOrder: [], steps: 5, easing: 'linear', includeEnds: true }, [inputs.shapes]); output.add(result); ``` #### node('light') Signature: `node(type: 'light', properties?: { group?: string, pattern?: string, lightType?: 'distant' | 'point' | 'shadow' | 'innerShadow' | 'castShadow', applyTo?: 'individual' | 'group', shadowOnly?: boolean, shadowOffset?: { x?: number, y?: number }, shadowBlur?: number, shadowColor?: string, shadowOpacity?: number, preset?: 'custom' | 'off-axis-front' | 'off-axis-back' | 'off-axis-left' | 'off-axis-right' | 'off-axis-top' | 'off-axis-bottom' | 'isometric-left' | 'isometric-right' | 'isometric-top' | 'isometric-bottom', projectionAngle?: number, projectionScale?: number, projectionAxisAngle?: number, shadowPivotOffset?: { x?: number, y?: number }, lightColor?: string, intensity?: number, softness?: number, surfaceScale?: number, enableSpecular?: boolean, specularExponent?: number, specularConstant?: number, azimuth?: number, elevation?: number, position?: { x?: number, y?: number, z?: number }, blendMode?: 'add' | 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity' }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Light node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('light', { group: '', pattern: '*', lightType: 'distant', applyTo: 'individual', shadowOnly: false, shadowOffset: { x: 0, y: 0 }, shadowBlur: 5, shadowColor: '#000000', shadowOpacity: 0.5, preset: 'custom', projectionAngle: 0, projectionScale: 0.5, projectionAxisAngle: 0, shadowPivotOffset: { x: 0, y: 0 }, lightColor: '#ffffff', intensity: 1.2, softness: 3, surfaceScale: 5, enableSpecular: false, specularExponent: 20, specularConstant: 1, azimuth: 225, elevation: 45, position: { x: 0, y: 0, z: 50 }, blendMode: 'add' }, [inputs.shapes]); output.add(result); ``` #### node('line') Signature: `node(type: 'line', properties?: { position?: { x?: number, y?: number }, length?: number, points?: number, scale?: number, rotation?: number, blur?: number, layers?: { type?: string, color?: string, width?: number, opacity?: number, visible?: boolean, join?: string, dash?: any[], dashOffset?: number, align?: string }[] })` Returns: `ShapeCollection` Description: Evaluates Line node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('line', { position: { x: 0, y: 0 }, length: 100, points: 2, scale: 1, rotation: -90, blur: 0, layers: [{ type: 'stroke', color: '#333333', width: 2, opacity: 1, visible: true, join: 'miter', dash: [], dashOffset: 0, align: 'center' }] }); output.add(result); ``` #### node('linearGradient') Signature: `node(type: 'linearGradient', properties?: { group?: string, applyTo?: 'individual' | 'group', targetLayer?: 'fill' | 'stroke', start?: { x?: number, y?: number }, end?: { x?: number, y?: number }, interpolation?: 'linear' | 'smooth', colorSpace?: 'rgb' | 'hsl', halftone?: boolean, halftoneSize?: number, invertHalftone?: boolean, stops?: { color?: string, offset?: number }[], blendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity' }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Linear Gradient node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('linearGradient', { group: '', applyTo: 'individual', targetLayer: 'fill', start: { x: 0, y: 0.5 }, end: { x: 1, y: 0.5 }, interpolation: 'linear', colorSpace: 'rgb', halftone: false, halftoneSize: 10, invertHalftone: false, stops: [{ color: '#ffffff', offset: 0 }, { color: '#000000', offset: 1 }], blendMode: 'normal' }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('mask') Signature: `node(type: 'mask', properties?: { mode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity', opacity?: number, swapInputs?: boolean, invertMask?: boolean, bake?: boolean, hardEdge?: boolean, offset?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[], tertiaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Mask node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('mask', { mode: 'normal', opacity: 1, swapInputs: false, invertMask: false, bake: false, hardEdge: false, offset: 0 }, [inputs.shapes], [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('matchSize') Signature: `node(type: 'matchSize', properties?: { group?: string, alignment?: 'center' | 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'place-on-top' | 'place-below' | 'place-left' | 'place-right', offset?: { x?: number, y?: number }, scaleToFit?: boolean, uniformScale?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Match Size node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('matchSize', { group: '', alignment: 'center', offset: { x: 0, y: 0 }, scaleToFit: false, uniformScale: true }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('merge') Signature: `node(type: 'merge', properties?: { inputOrder?: any[] }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Merge node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('merge', { inputOrder: [] }, [inputs.shapes]); output.add(result); ``` #### node('metadata') Signature: `node(type: 'metadata', properties?: { title?: string, description?: string, author?: string, license?: string, version?: string, link?: string, customFields?: any[] }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Metadata node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('metadata', { title: '', description: '', author: '', license: '', version: '', link: '', customFields: [] }, [inputs.shapes]); output.add(result); ``` #### node('mirror') Signature: `node(type: 'mirror', properties?: { direction?: 'right' | 'left' | 'bottom' | 'top', axisOffset?: number, mirrorOnly?: boolean, weld?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Mirror node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('mirror', { direction: 'right', axisOffset: 0, mirrorOnly: false, weld: true }, [inputs.shapes]); output.add(result); ``` #### node('morph') Signature: `node(type: 'morph', properties?: { amount?: number, density?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Morph node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('morph', { amount: 0.5, density: 0.5 }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('noise') Signature: `node(type: 'noise', properties?: { group?: string, operateOn?: 'shapes' | 'points', resample?: number, noiseType?: 'simplex' | 'worley' | 'fbm' | 'curl' | 'ridged' | 'domain', amplitude?: number, frequency?: number, offset?: { x?: number, y?: number } }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Noise node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('noise', { group: '', operateOn: 'shapes', resample: 32, noiseType: 'simplex', amplitude: 20, frequency: 1, offset: { x: 0, y: 0 } }, [inputs.shapes]); output.add(result); ``` #### node('null') Signature: `node(type: 'null', properties?: {}, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Null node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('null', {}, [inputs.shapes]); output.add(result); ``` #### node('packShapes') Signature: `node(type: 'packShapes', properties?: { iterations?: number, rotationStep?: number, spacing?: number, invertMask?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[], tertiaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Pack Shapes node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('packShapes', { iterations: 200, rotationStep: 90, spacing: 2, invertMask: false }, [inputs.shapes], [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('parentConstraint') Signature: `node(type: 'parentConstraint', properties?: { translate?: boolean, maintainOffset?: boolean, offsetPos?: { x?: number, y?: number }, rotate?: boolean, offsetRot?: number, scale?: boolean, offsetScale?: { x?: number, y?: number } }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Parent Constraint node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('parentConstraint', { translate: true, maintainOffset: true, offsetPos: { x: 0, y: 0 }, rotate: true, offsetRot: 0, scale: true, offsetScale: { x: 1, y: 1 } }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('pattern') Signature: `node(type: 'pattern', properties?: { layout?: 'grid' | 'brick' | 'hex' | 'triangular' | 'checkers' | 'herringbone' | 'polar' | 'phyllotaxis' | 'vortex' | 'wave' | 'poisson' | 'organic', spacing?: number, stagger?: number, rowOffset?: number, colOffset?: number, waveAmplitude?: number, waveFrequency?: number, rings?: number, rotation?: number, jitterPos?: number, jitterRot?: number, jitterScale?: number, nthStep?: number, nthOffset?: number, nthRotation?: number, nthScale?: number, nthTranslateX?: number, nthTranslateY?: number, seed?: number, outputMode?: 'individual' | 'combined' }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Pattern Generator node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('pattern', { layout: 'grid', spacing: 40, stagger: 0.5, rowOffset: 0, colOffset: 0, waveAmplitude: 20, waveFrequency: 0.05, rings: 5, rotation: 0, jitterPos: 0, jitterRot: 0, jitterScale: 0, nthStep: 2, nthOffset: 0, nthRotation: 0, nthScale: 1, nthTranslateX: 0, nthTranslateY: 0, seed: 0, outputMode: 'individual' }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('pencil') Signature: `node(type: 'pencil', properties?: { points?: any[], size?: number, eraseSize?: number, thinning?: number, smoothing?: number, streamline?: number, easing?: 'linear' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' | 'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart' | 'easeInQuint' | 'easeOutQuint' | 'easeInOutQuint' | 'easeInSine' | 'easeOutSine' | 'easeInOutSine' | 'easeInExpo' | 'easeOutExpo' | 'easeInOutExpo', taperStart?: number, capStart?: boolean, taperEnd?: number, capEnd?: boolean, layers?: { type?: string, color?: string, opacity?: number, visible?: boolean }[] })` Returns: `ShapeCollection` Description: Evaluates Pencil node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('pencil', { points: [], size: 10, eraseSize: 16, thinning: 0.5, smoothing: 0.5, streamline: 0.5, easing: 'linear', taperStart: 0, capStart: true, taperEnd: 0, capEnd: true, layers: [{ type: 'fill', color: '#000000', opacity: 1, visible: true }] }); output.add(result); ``` #### node('perspective') Signature: `node(type: 'perspective', properties?: { group?: string, preset?: 'custom' | 'off-axis-front' | 'off-axis-back' | 'off-axis-left' | 'off-axis-right' | 'off-axis-top' | 'off-axis-bottom' | 'isometric-left' | 'isometric-right' | 'isometric-top' | 'isometric-bottom', rotateX?: number, rotateY?: number, rotateZ?: number, topLeft?: { x?: number, y?: number }, topRight?: { x?: number, y?: number }, bottomRight?: { x?: number, y?: number }, bottomLeft?: { x?: number, y?: number } }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Perspective node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('perspective', { group: '', preset: 'custom', rotateX: 0, rotateY: 0, rotateZ: 0, topLeft: { x: 0, y: 0 }, topRight: { x: 0, y: 0 }, bottomRight: { x: 0, y: 0 }, bottomLeft: { x: 0, y: 0 } }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('pixelate') Signature: `node(type: 'pixelate', properties?: { group?: string, mode?: 'pixelate' | 'staggered', pixelSize?: number, gap?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Pixelate node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('pixelate', { group: '', mode: 'pixelate', pixelSize: 10, gap: 0 }, [inputs.shapes]); output.add(result); ``` #### node('portal') Signature: `node(type: 'portal', properties?: { targets?: any[] })` Returns: `ShapeCollection` Description: Evaluates Portal node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('portal', { targets: [] }); output.add(result); ``` #### node('radialGradient') Signature: `node(type: 'radialGradient', properties?: { group?: string, applyTo?: 'individual' | 'group', targetLayer?: 'fill' | 'stroke', center?: { x?: number, y?: number }, radius?: number, interpolation?: 'linear' | 'smooth', colorSpace?: 'rgb' | 'hsl', halftone?: boolean, halftoneSize?: number, invertHalftone?: boolean, stops?: { color?: string, offset?: number }[], blendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity' }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Radial Gradient node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('radialGradient', { group: '', applyTo: 'individual', targetLayer: 'fill', center: { x: 0.5, y: 0.5 }, radius: 0.5, interpolation: 'linear', colorSpace: 'rgb', halftone: false, halftoneSize: 10, invertHalftone: false, stops: [{ color: '#ffffff', offset: 0 }, { color: '#000000', offset: 1 }], blendMode: 'normal' }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('resample') Signature: `node(type: 'resample', properties?: { group?: string, mode?: 'length' | 'count' | 'preserve', length?: number, count?: number, useSimplify?: boolean, tolerance?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Resample node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('resample', { group: '', mode: 'count', length: 20, count: 10, useSimplify: false, tolerance: 1 }, [inputs.shapes]); output.add(result); ``` #### node('retime') Signature: `node(type: 'retime', properties?: { triggerBake?: null, mode?: 'speed' | 'offset' | 'custom', speed?: number, offset?: number, customFrame?: number, outOfBounds?: 'hold' | 'loop' | 'ping-pong', useCustomRange?: boolean, frameRange?: { start?: number, end?: number }, smooth?: boolean, _isBaking?: boolean, _bakeProgress?: number, _isBaked?: boolean, _bakedUpstreamHash?: string, _isDirty?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Retime node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('retime', { triggerBake: null, mode: 'speed', speed: 1, offset: 0, customFrame: 0, outOfBounds: 'hold', useCustomRange: false, frameRange: { start: 0, end: 100 }, smooth: true, _isBaking: false, _bakeProgress: 0, _isBaked: false, _bakedUpstreamHash: '', _isDirty: false }, [inputs.shapes]); output.add(result); ``` #### node('scatter') Signature: `node(type: 'scatter', properties?: { method?: 'fill' | 'outline', arrangement?: 'random' | 'grid', distribution?: 'density' | 'count' | 'spacing', density?: number, count?: number, spacing?: number, invertMask?: boolean, seed?: number, relaxIterations?: number, jitter?: number, scaleMode?: 'random' | 'gradient' | 'noise', minScale?: number, maxScale?: number, outlierPercent?: number, outlierRange?: number, outlierMode?: 'additive' | 'multiplicative', outlierDirection?: 'max' | 'min' | 'both', outlierSeed?: number, gradientStart?: { x?: number, y?: number }, gradientEnd?: { x?: number, y?: number }, noiseFrequency?: number, noiseOffset?: { x?: number, y?: number }, alignToNormal?: boolean, minRotation?: number, maxRotation?: number, blendVector?: { x?: number, y?: number }, blendAmount?: number, transferAttributes?: string }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Scatter node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('scatter', { method: 'fill', arrangement: 'random', distribution: 'count', density: 10, count: 100, spacing: 20, invertMask: false, seed: 123, relaxIterations: 5, jitter: 0.5, scaleMode: 'random', minScale: 0.5, maxScale: 1, outlierPercent: 0, outlierRange: 2, outlierMode: 'additive', outlierDirection: 'both', outlierSeed: 42, gradientStart: { x: 0.5, y: 0 }, gradientEnd: { x: 0.5, y: 1 }, noiseFrequency: 1, noiseOffset: { x: 0, y: 0 }, alignToNormal: true, minRotation: 0, maxRotation: 0, blendVector: { x: 0, y: -1 }, blendAmount: 0, transferAttributes: '' }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('separateShapes') Signature: `node(type: 'separateShapes', properties?: { group?: string }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Separate Shapes node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('separateShapes', { group: '' }, [inputs.shapes]); output.add(result); ``` #### node('shapeAlongPath') Signature: `node(type: 'shapeAlongPath', properties?: { mode?: 'stretch' | 'distribute' | 'repeat_count' | 'repeat_fit' | 'single', composition?: 'group' | 'individual', itemOrder?: 'sequential' | 'random', seed?: number, deform?: boolean, count?: number, spacing?: number, offset?: number, normalOffset?: number, alignY?: 'center' | 'top' | 'bottom', scale?: number, reverse?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Shape Along Path node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('shapeAlongPath', { mode: 'repeat_fit', composition: 'group', itemOrder: 'sequential', seed: 0, deform: true, count: 10, spacing: 0, offset: 0, normalOffset: 0, alignY: 'center', scale: 1, reverse: false }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('shapeMixer') Signature: `node(type: 'shapeMixer', properties?: { mode?: 'manual' | 'random', pieces?: any[], seed?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Shape Mixer node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('shapeMixer', { mode: 'manual', pieces: [], seed: 0 }, [inputs.shapes]); output.add(result); ``` #### node('smooth') Signature: `node(type: 'smooth', properties?: { group?: string, iterations?: number, strength?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Smooth node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('smooth', { group: '', iterations: 1, strength: 0.5 }, [inputs.shapes]); output.add(result); ``` #### node('split') Signature: `node(type: 'split', properties?: { group?: string, groupType?: 'shape' | 'point', invert?: boolean, discardGeometry?: boolean, deleteUnusedGroups?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Split node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('split', { group: '', groupType: 'shape', invert: false, discardGeometry: false, deleteUnusedGroups: true }, [inputs.shapes]); output.add(result); ``` #### node('subnet') Signature: `node(type: 'subnet', properties?: { nodes?: { type?: string, position?: { x?: number, y?: number }, data?: { label?: string } }[], edges?: any[], renderTargetId?: string }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Subnet node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('subnet', { nodes: [{ type: 'subnetInput', position: { x: 225, y: 50 }, data: { label: 'Input' } }, { type: 'subnetOutput', position: { x: 225, y: 250 }, data: { label: 'Output' } }], edges: [], renderTargetId: 'subnetOutput1' }, [inputs.shapes]); output.add(result); ``` #### node('switch') Signature: `node(type: 'switch', properties?: { group?: string, combineRule?: 'and' | 'or' | 'nand' | 'nor', conditions?: any[] }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Switch node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('switch', { group: '', combineRule: 'and', conditions: [] }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('textPath') Signature: `node(type: 'textPath', properties?: { startOffset?: number, side?: 'left' | 'right' }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Text on Path node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('textPath', { startOffset: 0, side: 'left' }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('transform') Signature: `node(type: 'transform', properties?: { group?: string, position?: { x?: number, y?: number }, pivotPlacement?: 'center' | 'top' | 'bottom' | 'left' | 'right', pivot?: { x?: number, y?: number }, scale?: number, rotation?: number, skew?: { x?: number, y?: number }, applyTo?: 'group' | 'individual' }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Transform node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('transform', { group: '', position: { x: 0, y: 0 }, pivotPlacement: 'center', pivot: { x: 0, y: 0 }, scale: 1, rotation: 0, skew: { x: 0, y: 0 }, applyTo: 'group' }, [inputs.shapes]); output.add(result); ``` #### node('triangulate') Signature: `node(type: 'triangulate', properties?: { group?: string, mode?: 'delaunay' | 'convex' | 'tessellation' | 'centroid', resample?: number, maxArea?: number, autoScatter?: number, seed?: number, showLines?: boolean, lineColor?: string, lineWidth?: number, outputGroups?: { steinerGroupName?: string } }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Triangulate node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('triangulate', { group: '', mode: 'delaunay', resample: 5, maxArea: 100, autoScatter: 0, seed: 0, showLines: true, lineColor: '#7ea3ff', lineWidth: 0.75, outputGroups: { steinerGroupName: 'internal_shapes' } }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` #### node('trimPath') Signature: `node(type: 'trimPath', properties?: { group?: string, start?: number, end?: number, offset?: number, reverse?: boolean, preservePoints?: boolean, mode?: 'subpath' | 'individual' | 'combined' }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Trim Path node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('trimPath', { group: '', start: 0, end: 1, offset: 0, reverse: false, preservePoints: false, mode: 'individual' }, [inputs.shapes]); output.add(result); ``` #### node('variations') Signature: `node(type: 'variations', properties?: { amount?: number, seed?: number, targets?: any[], layoutMode?: 'grid' | 'stacked', columns?: number, padding?: number, outputMode?: 'individual' | 'combined' }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Variations node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('variations', { amount: 5, seed: 0, targets: [], layoutMode: 'grid', columns: 3, padding: 50, outputMode: 'individual' }, [inputs.shapes]); output.add(result); ``` #### node('vectorize') Signature: `node(type: 'vectorize', properties?: { colorMode?: 'color' | 'binary', hierarchical?: 'stacked' | 'cutout', mode?: 'spline' | 'polygon' | 'pixel', filterSpeckle?: number, colorPrecision?: number, gradientStep?: number, cornerThreshold?: number, segmentLength?: number, spliceThreshold?: number, pathPrecision?: number, resample?: number, simplify?: number, smoothness?: number, vectorizeGroups?: any[] }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Vectorize node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('vectorize', { colorMode: 'color', hierarchical: 'stacked', mode: 'spline', filterSpeckle: 4, colorPrecision: 6, gradientStep: 16, cornerThreshold: 60, segmentLength: 4, spliceThreshold: 45, pathPrecision: 2, resample: 0, simplify: 0, smoothness: 0, vectorizeGroups: [] }, [inputs.shapes]); output.add(result); ``` #### node('warp') Signature: `node(type: 'warp', properties?: { group?: string, mode?: 'noise' | 'ripple', operateOn?: 'shapes' | 'points', amount?: { x?: number, y?: number }, frequency?: number, noiseOffset?: { x?: number, y?: number }, center?: { x?: number, y?: number }, radial?: boolean, resample?: number }, primaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Warp node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('warp', { group: '', mode: 'noise', operateOn: 'shapes', amount: { x: 20, y: 20 }, frequency: 1, noiseOffset: { x: 0, y: 0 }, center: { x: 0, y: 0 }, radial: false, resample: 50 }, [inputs.shapes]); output.add(result); ``` #### node('wrap') Signature: `node(type: 'wrap', properties?: { group?: string, targetFace?: 'front' | 'back' | 'side' | 'side_top' | 'side_bottom' | 'side_left' | 'side_right', mapOffset?: { x?: number, y?: number }, mapScale?: { x?: number, y?: number }, mapFlipX?: boolean, mapFlipY?: boolean, mapRotation?: number, resample?: number, hideTarget?: boolean }, primaryInputs?: ShapeCollection | ShapeWrapper[], secondaryInputs?: ShapeCollection | ShapeWrapper[])` Returns: `ShapeCollection` Description: Evaluates Wrap node. Returns a chainable ShapeCollection. Example: ```javascript let result = node('wrap', { group: '', targetFace: 'front', mapOffset: { x: 0, y: 0 }, mapScale: { x: 1, y: 1 }, mapFlipX: false, mapFlipY: false, mapRotation: 0, resample: 50, hideTarget: true }, [inputs.shapes], [inputs.shapes]); output.add(result); ``` --- ### Spiral URL: https://animgraphlab.com/docs/nodes/spiral Spiral node generates various types of spiral paths. Unlike closed shapes like the Circle or Rectangle, the Spiral is an open path by default (though it can be filled). You can control where the spiral starts and ends relative to the center, as well as how many times it winds around the center. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Type | Choose between different spiral types. | | Translate | Sets the X and Y coordinates of the shape's center. | | Start radius | The starting radius of the spiral. | | End radius | The final radius of the spiral (or scale factor). | | Arms | Number of spiral arms for Polyskelion. | | Height | The vertical height (depth) of the helix. | | Tilt | Simulates 3D depth perception. | | Revolutions | The number of full turns the spiral makes. | | Points | The number of points used to construct the spiral path. | | Divergence | Controls the curvature growth or exponent for Cornu. | | Scale | Scales the shape from its center. | | Rotation | Rotates the shape around its center. | | Blur | Applies a Gaussian blur effect to the shape. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | arms | Arms | | blur | Blur | | divergence | Divergence | | endRadius | End radius | | height | Height | | label | Label | | layers | Layers | | perspectiveTilt | Tilt | | points | Points | | position.x | Translate X | | position.y | Translate Y | | revolutions | Revolutions | | rotation | Rotation | | scale | Scale | | spiralType | Type | | startRadius | Start radius | ## Spiral types --- ### Split URL: https://animgraphlab.com/docs/nodes/split The Split node acts as a filter for your geometry stream. It allows you to isolate specific shapes or points based on a Group pattern and discard the rest. Unlike Separate Shapes, which explodes a single shape into multiple nodes, the Split node is designed to handle streams containing multiple distinct objects (e.g., from a Merge node or a Scatter result). ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Subset of the input geometry to split. Supports patterns. | | Group Type | The type of entities to split. | | Invert Selection | Negates the sense of the selection. | | Discard geometry | If enabled, removes lines/faces and keeps only the points (Point Cloud). | | Delete unused groups | Remove any groups that are left empty after splitting. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | deleteUnusedGroups | Delete unused groups | | discardGeometry | Discard geometry | | group | Group | | groupType | Group Type | | invert | Invert Selection | | label | Label | ## Usage ### Filtering Shapes By default, the Split node operates in Shape mode. This is useful for processing specific parts of a complex composition differently. - Connect a stream containing multiple shapes (e.g., from a Merge node). - Enter the name of the shape(s) you want to keep in the Group field. You can use wildcards (e.g., Star*). - The node outputs only the matching shapes. ### Splitting Flow To separate a stream into two distinct branches (A and B), use two Split nodes: - Branch A: Use a Split node selecting Group A. - Branch B: Use a Split node selecting Group A with Invert Selection enabled. ### Filtering Points When set to Points, the node filters the vertices of the input geometry. - The result is returned as a Point Cloud, destroying the original topology (path connectivity). - This is useful for isolating specific points for instancing (e.g., "Keep only points on the left side"). --- ### Spreadsheet URL: https://animgraphlab.com/docs/ui/spreadsheet Points Shapes Elements Viewing: Rectangle 1 4 rows
id px py pz color pscale rotation
0 100 0 0 #ff0000 1 0
1 92.38 38.26 0 #ff0000 1 22.5
2 70.71 70.71 0 #ff0000 1 45
3 38.26 92.38 0 #ff0000 1 67.5
Spreadsheet gives you a direct look at how data is flowing and changing through nodegraph, how data changes after going through specific node. While Canvas shows you the visual result, Spreadsheet shows you the numbers and attributes that define it. This can be used as a debugging tool. If a shape isn't appearing or an effect looks wrong, the Spreadsheet will often tell you why it's like that, possibly due to a missing attribute, a NaN value, or something else. ## Accessing spreadsheet - Shortcut: Shift + S - Nodegraph: In the Nodegraph menubar, View → Toggle spreadsheet. ## View tabs ### Points tab This is the default view. It lists every single point in the geometry. - Position: px, py, pz - Attributes: pscale, rotation, color, alpha, etc. - Vectors: Normals (nx, ny, nz) and Tangents (tx, ty, tz). - etc... If you use a Scatter node to generate 50 points, this view will show 50 rows. ### Shapes tab This view lists the high-level objects. Use this to inspect: - Transforms: tx, ty, sx, sy, rot (World space transforms) - Properties: closed, opacity, blur, etc. - Metadata: Group memberships, layer types, and IDs. - etc... If your graph contains 50 scattered points but they act as a single "Point Cloud" object type, this view will show just 1 row. ### Elements tab This view displays the raw SVG structure generated by the geometry. It's useful for inspecting how shapes are translated into the final vector output, checking for hierarchy issues, or debugging render attributes. ## Data flow analysis Sometimes seeing the final value isn't enough and you need to know how it got there. Data flow tool allows to trace the history of a specific point or shape back through the graph. - Select any row in the spreadsheet. - Click icon that appears in the toolbar. This opens a dialog showing every node that modified that specific nide, highlighting exactly which values changed at each step up to currently selected node. Example: Tracing history of "Rectangle 1" - Green values: indicate the new value after the node processed the item. - Red strikethough: values indicate what the value was before the node changed it. > Note: You can use search bar at the top of opened dialog to filter steps by node name (label). ## Filtering and sorting When working with thousands of points or tens of shapes, finding specific data can be hard. Spreadsheet provides tools to narrow it down. ### Sorting Click any column header to sort colum by a corresponding attribute. Click again to toggle between ascending and descending order. ### Filtering Click the icon to open the filter menu. - Filter rows: Enter a pattern to show only matching rows. *box* matches any value containing "box". - >0.5 matches numbers greater than 0.5. - ^0 matches anything except 0 (useful for finding non-zero values). - Search scope: Choose which columns to search in (e.g., only search id or groups). - Column visibility: Toggle the icon next to column names to hide irrelevant data and declutter the view. ## Exporting data You can copy the current view's data to your clipboard as JSON by clicking the icon in the spreadsheet header. This is useful for external analysis or debugging. --- ### Star URL: https://animgraphlab.com/docs/nodes/star Star node generates a classic star shape. You can control the number of points, as well as the size of the inner and outer radii to create a wide variety of star styles. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Translate | Sets the X and Y coordinates of the shape's center. | | Points | The number of points on the star. | | Outer radius | The distance from the center to the outer points. | | Inner radius | The distance from the center to the inner points. | | Scale | Scales the shape from its center. | | Rotation | Rotates the shape around its center. | | Blur | Applies a Gaussian blur effect to the shape. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | blur | Blur | | innerRadius | Inner radius | | label | Label | | layers | Layers | | outerRadius | Outer radius | | points | Points | | position.x | Translate X | | position.y | Translate Y | | rotation | Rotation | | scale | Scale | --- ### Subnet URL: https://animgraphlab.com/docs/nodes/subnet Subnet AKA Subnetwork. The Subnet node is a organizational tool that allows you to collapse a complex network of nodes into a single, manageable block. Think of it as a folder or a function for your node graph. It helps keep your main graph clean and makes it easier to reuse parts of your logic. When you create a Subnet node, it comes pre-populated with a Subnet Input and a Subnet Output node inside. ## How It Works You can double-click a Subnet node to "dive into" it and edit its internal graph. When you're inside, a breadcrumb trail will appear at the top-left of the graph editor, allowing you to navigate back out to the parent graph. - Input (Optional): If nodes are connected to the Subnet in the parent graph, their data is passed to the Subnet Input node inside. - Internal Logic: Inside the subnet, you can build any network of nodes. If the subnet receives data from the parent graph, you can start your logic from the Subnet Input node. Alternatively, you can generate all data from scratch within the subnet itself. - Output: The final result of your internal logic should be connected to the Subnet Output node. This result then becomes the output of the main Subnet node in the parent graph. ## Creating a Subnet You can create a Subnet in two ways: - From the search menu: Press Tab or right-click in the graph and search for "Subnet". This creates a new, empty subnet. - From a selection: Select two or more nodes and use the shortcut Ctrl+C. This will automatically wrap your selected nodes and their internal connections into a new Subnet, rewiring the external connections for you. - Using NodeGraph menu bar: Actions > Create Subnet. --- ### Subnet input URL: https://animgraphlab.com/docs/nodes/subnetInput The Subnet Input node is a special node that can only be used inside a Subnet. It acts as the placeholder for all incoming connections from the parent graph. ## Purpose The Subnet Input node acts as the entry point for data coming from the parent graph. When you connect nodes to the parent Subnet node, their combined output becomes available from this node's output handle, allowing you to use external data within your subnet's logic. A subnet is not required to use its input; it can also generate all of its data internally. - It has no input handles because it is the input. - It can only be created from the node search menu when you are inside a Subnet. It is also automatically created when you make a new Subnet. --- ### Subnet output URL: https://animgraphlab.com/docs/nodes/subnetOutput The Subnet Output node is a special node that can only be used inside a Subnet. It serves as the final exit point, passing data from the subnet's internal graph back out to the parent graph. ## Purpose Whatever nodes you connect to the Subnet Output node's input handle will become the final output of the parent Subnet node. This allows you to connect the results of your encapsulated logic to the rest of your main graph. - It has no output handles because it is the output. - It can only be created from the node search menu when you are inside a Subnet. It is also automatically created when you make a new Subnet. - It also acts as the default Render Target for the subnet. --- ### Switch URL: https://animgraphlab.com/docs/nodes/switch The Switch node acts as a logic gate for your nodegraph. It acts like a if statement and can be used for creating systems that can handle errors, empty shapes, dynamic logic based on attributes. It inspects the data coming into its Input 2 ("True" or target input) and decides whether to let it pass through or swap it with the data from Input 1 (the "False" or fallback input). > Note: You can chain switch nodes to act like if/else if/else statements ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Subset of the input geometry to check against. Supports patterns. | | Logic | How multiple conditions are combined. | ## Logic Flow - Input 1 (False/Fallback): Connect your default geometry here (an error message via text node, a placeholder shape, or an empty stream). - Input 2 (True/Target): Connect the main geometry you want to check. - Evaluation: The node runs the configured Conditions against the geometry in Input 2. Pass: If the conditions are met, Input 2 is output. - Fail: If the conditions are not met, Input 1 is output. ## Conditions The Switch node evaluates the geometry based on specific criteria. You can choose what aspect of the geometry to inspect. ### Check Types any valid data in the input stream. Useful for handling cases where a previous operation (like a Boolean intersection) might result in nothing.'], ['Point Count', 'Checks the total number of vertices in the input. Useful for Level of Detail (LOD) switching (e.g., "If point count > 1000, show low-poly version").'], ['Shape Count', 'Checks the number of distinct shapes/paths in the stream.'], ['Attribute', 'Inspects properties of the shapes. This is the most powerful mode. You can check standard properties like id or opacity, or custom attributes added by other nodes (like color, weight, or type).'] ]} /> ### Operators 4 and strings "4"'], ['Does Not Equal', 'Inverted equality check.'], ['Contains', 'Checks if a string attribute contains a specific substring (checking if a shape name contains "wheel").'] ]} /> ### Logic Combination You can add multiple conditions to a single Switch node. The Combine Rule determines how these conditions work together to produce a final True/False result. True only if all conditions are met.'], ['OR', 'Returns True if at least one condition is met.'], ['Not All (NAND)', 'Returns True if at least one condition fails (opposite of AND).'], ['Not Any (NOR)', 'Returns True only if all conditions fail (opposite of OR).'] ]} /> ## Group Scope The Group parameter acts as a pre-filter. If you specify a group pattern (like star*) coming from a Group node, the Switch node will only check the conditions against shapes that match that pattern. - If no shapes match the group pattern, the condition is considered failed (unless using Geometry Exists with inverted logic). - If shapes match, the logic runs only on the matching subset. --- ### Text URL: https://animgraphlab.com/docs/nodes/text Text node is used to create and style text layers. It provides extensive control over typography, including font family, size, style, spacing, and more. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Content | The text content to be rendered. | | Align | Text horizontal alignment. | | Orientation | Sets the text layout direction. | | Translate | Sets the X and Y coordinates of the text's origin. | | Scale | Scales the text from its origin. | | Rotation | Rotates the text around its origin. | | Blur | Applies a Gaussian blur effect to the text. | | Font | The font family for the text. | | Size | The font size in pixels. | | Style | The font weight and style (e.g., Bold, Italic). | | Slant | The angle to slant or italicize the text. | | Spacing | The spacing between characters. | | Line height | The height of each line of text, as a multiple of font size. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | align | Align | | blur | Blur | | content | Content | | fontFamily | Font | | fontSize | Size | | fontVariant | Style | | label | Label | | layers | Layers | | letterSpacing | Spacing | | lineHeight | Line height | | obliqueAngle | Slant | | orientation | Orientation | | position.x | Translate X | | position.y | Translate Y | | rotation | Rotation | | scale | Scale | --- ### Text on path URL: https://animgraphlab.com/docs/nodes/textPath Text on path node wraps the content from a text source along the geometry of a path or shape source. It supports any node that outputs geometry, such as Paths, Rectangles, Spirals, or even other text converted to paths. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Start offset | The offset of the text along the path. | | Side | Determines which side of the path the text is rendered on. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | label | Label | | side | Side | | startOffset | Start offset | Input: Input 1 The path that defines where text will be placed. Input: Input 3 The shape(s) to move/devform along path. ## Modes ## Usage To use the Text on Path node, you need two upstream nodes: - Text Source (Primary Input): A Text node that defines the content, font family, weight, and styling. - Path Source (Secondary Input): A shape node that defines the curve the text will follow. Connect them to the Text on Path node inputs. The text will automatically align to the start of the path geometry. ## Placement Controls - Start Offset: Moves the text along the path. 0% is the start of the path, 100% is the end. - Side: Determines whether the text sits on the "Left" or "Right" side of the path direction. Effectively flips the text across the path line. ## Tips - If the text is upside down or backwards, try toggling the Side parameter or reversing the direction of your path geometry. - The node inherits fill and stroke styles from the Text input, not the path. - Since the text follows the path's geometry, animating the path (e.g. with a Noise node) will also animate the text flowing along it. --- ### Transform URL: https://animgraphlab.com/docs/nodes/transform Transform node applies transformations to its input. It can move, scale, and rotate any shape or group of shapes without affecting their original parameters. By setting Apply pivot to to Individual shapes, and targeting a Falloff attribute (like weight), Transform node acts as a powerful effector in animation. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | The name of the group to transform. | | Translate | Moves the group in X and Y direction. | | Pivot placement | Sets the base pivot point relative to the bounds. | | Pivot offset | Offset from the base pivot placement for rotation and scaling. | | Scale | Scales the group from its center. | | Rotation | Rotates the group around its center. | | Skew | Skews the group around its center. | | Apply pivot to | Select "Individual Shapes" to scale/rotate copies in place (required for proper Falloff scaling). | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | applyTo | Apply pivot to | | group | Group | | label | Label | | pivot.x | Translate X | | pivot.y | Translate Y | | pivotPlacement | Pivot placement | | position.x | Translate X | | position.y | Translate Y | | rotation | Rotation | | scale | Scale | | skew.x | Skew X | | skew.y | Skew Y | --- ### Trapezoid URL: https://animgraphlab.com/docs/nodes/trapezoid Trapezoid node generates a quadrilateral with at least one pair of parallel sides. It is defined by the width of its top edge, the width of its bottom edge, and its height. By adjusting the top and bottom widths, you can create isosceles trapezoids, rectangles (if widths are equal), or triangles (if one width is zero). ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Translate | Sets the X and Y coordinates of the shape's center. | | Top width | The width of the top edge. | | Bottom width | The width of the bottom edge. | | Height | The height of the trapezoid. | | Scale | Scales the shape from its center. | | Rotation | Rotates the shape around its center. | | Blur | Applies a Gaussian blur effect to the shape. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | blur | Blur | | bottomWidth | Bottom width | | height | Height | | label | Label | | layers | Layers | | position.x | Translate X | | position.y | Translate Y | | rotation | Rotation | | scale | Scale | | topWidth | Top width | --- ### Triangulate URL: https://animgraphlab.com/docs/nodes/triangulate Triangulate node decomposes complex shapes into a mesh of simpler polygons, usually triangles. This is useful for creating effect like "low-poly" look. It supports standard Delaunay triangulation as well as convex partitioning and centroid-based tessellation. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Subset of the input geometry to split. Supports patterns. | | Mode | The triangulation method. Use Max Area to automatically subdivide shapes. | | Resample | Spacing to sample points along curved boundaries. | | Max area | Automatically subdivides triangles larger than this area. Lower value produce densier geometry. 0 disables subdivision. | | Internal points | Adds random points inside the shape to break up large triangles and create a denser, sometimes more even mesh. | | Seed | Random seed for the auto scatter placement. | | Wireframe | Toggles wireframe visualization. | | Line color | Color of the triangulation wireframe. | | Line width | Thickness of the triangulation lines. | | Output group | Creates a group for shapes generated by internal points that comes from a second input. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | autoScatter | Internal points | | group | Group | | label | Label | | lineColor | Line color | | lineWidth | Line width | | maxArea | Max area | | mode | Mode | | outputGroups.steinerGroupName | Steiner group | | resample | Resample | | seed | Seed | | showLines | Wireframe | ## Modes - Delaunay: standard triangulation algorithm that maximizes the minimum angle of all the angles of the triangles in the triangulation. It avoids "sliver" triangles. - Convex polygons: decomposes shape into larger convex polygons instead of triangles where possible. Results in cleaner, blockier looks. - Tessellation: similar to Delaunay but often produces a denser, more regular mesh. - Centroid net: connects the centroids of triangles, creating a dual-mesh style effect often resembling Voronoi cells. ## Refinement You can control the density and quality of the resulting mesh using these settings. - Max area: subdivides any triangle larger than this value. Lower values create a much denser mesh with more uniform triangle sizes. Value of 0 disables subdivision. - Resample: before triangulation, the boundary of shape is sampled into points. This controls the distance between those boundary points. Smaller values capture more curve detail but increase the point/polygon count. ## Internal points By default, triangulation connects the points on the boundary of a shape. To create structure inside the shape, you need internal points. - Auto scatter (Internal points): automatically generates N random points inside the shape before triangulating. This can be used to art direct where triangluation will happen. - Steiner points Input: optional secondary input that accepts a point cloud (for example from Scatter node). These points will be included in the triangulation, allowing precise control over vertex placement. ## Visualization - Show lines: renders the wireframe of the mesh on top of the shapes. - Line color / width: styling for the wireframe overlay. > Note: To render only wireframe, turn off/remove fill color on original shape node upstream. --- ### Trim path URL: https://animgraphlab.com/docs/nodes/trim-path Trim Path node allows you to slice, animate, or shorten the stroke of a vector path. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Specifies a subset of shapes to trim. | | Start | The start point of the path. | | End | The end point of the path. | | Offset | Shifts the visible segment along the path. | | Reverse direction | Inverts the trim direction. | | Preserve points | Collapses trimmed points to boundaries instead of deleting them. Required for State Machine crossfading. | | Mode | Controls how multiple shapes and sub-paths are trimmed. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | end | End | | group | Group | | label | Label | | mode | Mode | | offset | Offset | | preservePoints | Preserve points | | reverse | Reverse direction | | start | Start | --- ### User interface URL: https://animgraphlab.com/docs/ui/index This section provides detailed documentation on the various parts of the AnimGraphLab user interface. ## Core workspaces - Canvas: main visual viewport. Learn about navigation, interactive gizmos, path editing, and group selection. - Nodegraph: primary workspace for building illustrations and logic. Learn about node connections, quickmarks, auto-wiring, and using AI-generated payloads. - Parameters panel: control center for the selected node. Learn how to edit properties, use Expressions, link values with Parameter referencing, and save Presets. - Spreadsheet: data inspector. View raw geometry data, point attributes, and trace how data flows and changes step-by-step through graph. ## Workflow & Management - Keyboard shortcuts: complete, searchable reference for all global and context-specific keyboard shortcuts. - Sharing projects: how to manage workspace and share projects with public links. - Free tier limits: detailed breakdown of the constraints, limits, and available features on the free plan. --- ### Variations URL: https://animgraphlab.com/docs/nodes/variations Variations node creates multiple variants based on target parameter(s) on a target upstream node(s). It duplicates entire upstream nodegraph multiple times, changes a specific parameter (like a seed, a radius, or a color) for a target node for every duplicate it creates. This workflow is commonly known as Wedging in procedural software. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Amount | Number of variations to generate. | | Seed | Seed for randomization. | | Targets | Defines which parameters to override for wedging. | | Layout mode | How to arrange the generated variants in the canvas. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | amount | Amount | | columns | Columns | | label | Label | | layoutMode | Layout mode | | outputMode | Output mode | | padding | Padding | | seed | Seed | | targets | Targets | ## Variations vs Attribute Randomize While both nodes deal with randomness, they serve entirely different purposes: - Attribute Randomize is a Modifier. It loops through geometry fed into it (e.g., 10 circles) and changes them based on a set of rules. The number of shapes stays the same. - Variations is a Multiplier. It takes entire upstream nodegraph, duplicates and forces a specific knob to a new value for each parallel universe it creates. The number of shapes is multiplied. ## Workflow 1: Contact sheet When designing, you may want to see 10 different versions of it side-by-side to pick the best one. ## Workflow 2: Downstream Instancing Variations node tags every generated clone with a unique internal Variant ID. This makes it incredibly powerful when combined with the Copy to Points node. If you set the Layout parameter to Stacked, all variations will overlap in the center of the canvas. You can then feed this stack directly into the Geometry input of Copy to Points to scatter your variations across a surface. ## Workflow 3: Randomizing the Randomizer Because Variations can target any upstream node, you can target global or dynamic Seed parameter of an Attribute Randomize node. --- ### Vectorize URL: https://animgraphlab.com/docs/nodes/vectorize Vectorize node converts raster images, such as JPG, PNG, WEBP files loaded from Import node into editable vector geometry. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Color Mode | Choose color tracing or binary thresholding. | | Clustering | Stacked overlaps shapes; Cutout makes puzzle-like layers. | | Curve Fitting | Method used to fit curves to pixel data. | | Filter Speckle | Removes tiny shapes. Higher = more noise removed. Lower = more small detail kept. | | Color Precision | Controls color count. Lower = fewer colors. Higher = more accurate colors. | | Gradient Step | Color-difference threshold. Higher = merges colors. Lower = captures subtle shifts. | | Corner Threshold | Angle for sharp corners. Higher = sharper corners. Lower = rounder ones. | | Segment Length | Minimum segment size. Lower = more detail. Higher = smoother shapes. | | Splice Threshold | Join-angle limit. Higher = longer merged lines. Lower = more separate segments. | | Path Precision | Decimal precision. Lower = smaller file. Higher = more accurate shapes. | | Resample | Even-spacing of points. Lower = more points/detail. Higher = fewer points/abstract. 0 disables. | | Simplify | Point-removal tolerance. Higher = cleaner/abstract. Lower = more detail. | | Smoothness | Smoothing passes. Higher = rounder shapes. Lower = sharper edges. | | Vectorize Groups | Groups for applying separate simplify/smooth settings to selected shapes. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | colorMode | Color Mode | | colorPrecision | Color Precision | | cornerThreshold | Corner Threshold | | filterSpeckle | Filter Speckle | | gradientStep | Gradient Step | | hierarchical | Clustering | | label | Label | | mode | Curve Fitting | | pathPrecision | Path Precision | | resample | Resample | | segmentLength | Segment Length | | simplify | Simplify | | smoothness | Smoothness | | spliceThreshold | Splice Threshold | | vectorizeGroups | Vectorize Groups | ## Modes ### Color Mode - Color: Traces the image using a quantization palette. This preserves the colors of the original image but reduces them to a manageable number of layers. - Black & White: Thresholds the image into a binary mask before tracing. This is ideal for high-contrast line art, logos, or scanned signatures. ### Clustering Strategy This setting determines how the resulting vector shapes relate to one another. - Stacked: Shapes are generated on top of one another. This usually results in fewer gaps and is better for digital display, but creates overlapping geometry which may not be desired for fabrication. - Cutout: Shapes are generated like a jigsaw puzzle with no overlaps. This is the preferred mode for vinyl cutting or plotting to prevent the machine from cutting the same boundary twice. ### Curve Fitting - Spline: Fits smooth Bezier curves to the geometry. Best for organic shapes and standard vector illustration. - Polygon: Fits straight line segments to the geometry. Useful for technical looks or "low-poly" effects. - Pixel: Maintains the exact stair-step boundaries of the original pixels. Perfect for scaling up pixel art without blurring. ## Clustering Settings These settings control how the raw pixel data is analyzed and grouped before geometry is created. ### Filter Speckle Controls the cleanup of small noise. - Effect: Discards any shapes that contain fewer pixels than this value. - Usage: Increase this to remove dust, scan noise, or compression artifacts from the image. ### Color Precision Available in Color Mode only. Controls the complexity of the color palette. - Effect: Defines the number of significant bits to use for color quantization. - Usage: Lower values result in fewer unique colors and a "posterized" look. Higher values retain more color fidelity but create more complex geometry. ### Gradient Step Available in Color Mode only. Controls how gradients are handled. - Effect: The threshold for color differences to trigger a new layer. - Usage: Higher values merge similar colors together, resulting in fewer "bands" in gradient areas. Lower values capture subtle color shifts. ## Refine Settings Fine-tune how vector curves are fitted to the pixel shapes. These settings are primarily available when Curve Fitting is set to Spline or Polygon. ### Corner Threshold Determines the sharpness of vertices. - Effect: The minimum angle (in degrees) required to consider a vertex a sharp corner. - Usage: If corners look too rounded, decrease this value. If curves have sharp kinks, increase this value. ### Segment Length Controls the resolution of the tracing grid. - Effect: The minimum length of a segment. - Usage: Smaller values capture fine details but increase the point count significantly. Larger values create smoother, more abstract shapes. ### Splice Threshold Optimizes long curves. - Effect: The angle threshold (in degrees) for joining consecutive segments into a single line or curve. - Usage: Helps create longer, continuous lines instead of many short segments. ### Path Precision Controls output data size. - Effect: The number of decimal places used for coordinate values in the resulting vector data. - Usage: Lower values reduce memory usage but may slightly distort very small shapes. ## Post-Processing This section refers to the global post-processing settings. Refer to the Vectorize Groups section below for group-specific settings. Raw traces can often be messy, containing too many points or jagged edges. The Post-Processing aka Vectorize Groups helps you clean up the vectors to make them easier to edit and smoother to look at. Ideal workflow: group shapes you want to post-process -> adjust settings -> repeat for other groups. If not using groups, the global post-processing settings will apply to all shapes (whole thing) which might be a something you want, or don't. ### Resample Think of this as "re-topology" for 2D lines. Tracing algorithms often bunch points together in corners and leave long gaps on straight lines. - Value: Sets the target distance between points. Smaller values mean more points, but may retain jittery noise, larger values mean less points but may lose fine details. - Effect: It rebuilds shapes with evenly spaced points. This creates a clean slate before you apply simplification or smoothing. ### Simplify Reduces the number of points in shape to make it cleaner and "lighter." - Effect: It removes points that don't contribute much to the shape (like points on a straight line). - Usage: Increase this value to remove jittery noise from a hand-drawn scan. Larger value means fewer points while retaining shape siluette. ### Smoothness Polishes the sharp edges. - Effect: It rounds off sharp corners and jagged pixel steps. - Usage: Great for organic shapes. If trace looks "blocky" or "pixelated," increasing smoothness will melt those blocks into curves. ## Vectorize Groups Global settings rarely work perfectly for an entire image. You might want the background to be very abstract and smooth, but the subject to remain sharp and detailed. Vectorize Groups allow you to target specific shapes and apply different post-processing settings to them. - Click Add Group. - Use Pick from Canvas to select the shapes you want to isolate. - Adjust Resample, Simplify, and Smoothness inside that group. These settings will override the global settings for the selected shapes only. --- ### Warp URL: https://animgraphlab.com/docs/nodes/warp Warp node displaces the points of a shape based on an underlying field. It can be used to create organic distortions, liquid-like noise, glitches, or concentric ripples (doppler effect). Unlike the Noise node which strictly moves points along their normals, Warp provides independent X and Y axis displacement options. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Specifies a subset of shapes or points to deform. | | Mode | Choose the deformation method. | | Operate on | Warp whole shape by resampling it or use existing points. | | Amount | The strength of the warp effect on the X and Y axes. | | Frequency | How tight or spread out the warp waves are. | | Phase | Pans the warp field. In Ripple mode, X acts as phase/time. | | Center | Center of the ripple effect. | | Radial displacement | Pushes points away from the center radially instead of along absolute X/Y axes. | | Resample | Number of points to generate for smooth deformation. 0 disables resampling. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | amount.x | X | | amount.y | Y | | center.x | Translate X | | center.y | Translate Y | | frequency | Frequency | | group | Group | | label | Label | | mode | Mode | | noiseOffset.x | X | | noiseOffset.y | Y | | operateOn | Operate on | | radial | Radial displacement | | resample | Resample | ## Modes - Noise field: displaces points using a 2D Simplex noise algorithm for organic and liquid effects. - Ripple: displaces points according to a spherical wave function, originating from the center that can be offseted. --- ### Wrap URL: https://animgraphlab.com/docs/nodes/wrap Wrap node projects flat 2D shapes onto the front, back, or sides of a 3D object generated by the Extrude 3D node. ## Parameters | Parameter | Description | | --- | --- | | Label | The display name for the node. | | Group | Specifies a subset of shapes or points to wrap. | | Target face | Which face of the 3D extrusion to map shape onto. | | Surface offset | Offset projected shape along the surface. | | Surface scale | Scale projected shape. | | Flip X | Flips mapped shape horizontally. Useful for correcting mirrored text on radial faces. | | Flip Y | Flips mapped shape vertically. | | Rotation | Rotate the art on the face. | | Resample | Number of points to generate for smooth deformation. 0 disables resampling. | | Hide target | Hides the original 2D shape that is being wrapped. | ### Internal parameter names These parameters can be used in: - Expressions: `=ref('node name', 'parameter name')` - Attribute randomize node, `parameter` input. | Parameter name | UI label | | --- | --- | | group | Group | | hideTarget | Hide target | | label | Label | | mapFlipX | Flip X | | mapFlipY | Flip Y | | mapOffset.x | X | | mapOffset.y | Y | | mapRotation | Rotation | | mapScale.x | X | | mapScale.y | Y | | paramError | Param Error | | resample | Resample | | targetFace | Target face | ---