# AnimGraphLab Documentation
Procedural node based online SVG and animation documentation.
## Nodes
- [Arrow](https://animgraphlab.com/docs/nodes/arrow): Generates a customizable arrow shape with adjustable shaft and head dimensions.
- [Artboard](https://animgraphlab.com/docs/nodes/artboard): Serves as the final canvas for rendering your 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 randomize](https://animgraphlab.com/docs/nodes/attribute-randomize): Adds variation to points or shapes to control instancing, transforms, and procedural effects.
- [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 or Directional 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): The Color node applies a solid color fill to an incoming shape or layer stack.
- [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, with control over orientation and scale.
- [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): The Ellipse node 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.
- [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): Projects 2D shapes into pseudo-3D space, fully in SVG.
- [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.
- [Fuse](https://animgraphlab.com/docs/nodes/fuse): Merges nearby points within a specified distance.
- [Grain](https://animgraphlab.com/docs/nodes/grain): Adds a procedural grain or noise texture to shapes.
- [Group](https://animgraphlab.com/docs/nodes/group): Create and manage selections of shapes or shape points.
- [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): Fills a shape with hatching lines, crosshatching, zig-zags, or scribbles.
- [Import](https://animgraphlab.com/docs/nodes/import): Allows to bring external SVG, raster image files.
- [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.
- [Linear gradient](https://animgraphlab.com/docs/nodes/linear-gradient): Creates a linear gradient fill that can be 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 or property 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.
- [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.
- [Object merge](https://animgraphlab.com/docs/nodes/object-merge): Fetches geometry from Null nodes anywhere in the graph without using wires, enabling clean and organized graph structures.
- [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): Allows to 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): Allows to draw freehand strokes that can be filled and outlined.
- [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.
- [Radial gradient](https://animgraphlab.com/docs/nodes/radial-gradient): Creates a radial gradient fill that can be 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.
- [Scatter](https://animgraphlab.com/docs/nodes/scatter): Scatters points randomly inside a shape's area or along its outline.
- [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/dashbaord/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.
- [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 your node graph 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): The Transform node applies transformations like position, scale, and rotation to an incoming shape or layer stack.
- [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's start and end points.
- [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) for look-dev and instancing.
- [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 functions.
## 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](/docs/nodes/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](/docs/nodes/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
1. Create multiple Artboard nodes, each with different content.
2. Connect the output of each Artboard node to the input of a single Artboard Merge node.
3. Adjust the Columns, Horizontal Padding, and Vertical Padding parameters on the Artboard Merge node to arrange the artboards as desired.
4. 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 randomize
URL: https://animgraphlab.com/docs/nodes/attribute-randomize
Attribute Randomize node injects variation into the graph:
* [Points mode](#workflow-copies) to control the placement, scale, and rotation of copies.
* [Deep injection](#workflow-deep) to randomize properties of Primitives (Rectangle width, Star points).
* [Shapes mode](#workflow-per-shape) 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. |
| Group | Specifies a subset of points or shapes to affect. Uses pattern matching. |
| Parameter | 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 |
| 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 |
## 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](/docs/nodes/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](/docs/nodes/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](/docs/nodes/copy-to-points) or [Copy & Transform](/docs/nodes/copy-and-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
NoiseBendClipGrainBevelMirrorDeleteSplitFuse
## Examples
---
### 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. |
| Resample length | The approximate distance between resampled points. Smaller values create a smoother, more detailed bend. |
| Deform in both directions | Applies the Bend Angle in the direction opposite to the Capture Direction. |
### 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 |
| 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](/docs/nodes/bevel) or [Noise](/docs/nodes/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:
1. axis-aligned (AABB).
2. oriented (OBB).
3. convex hull.
4. 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. |
### Internal parameter names
These parameters can be used in:
- Expressions: =ref('node name', 'parameter name')
- Attribute randomize node, 'parameter' input.
| Parameter name | UI label |
| --- | --- |
| direction | Direction |
| distance | Distance |
| group | Group |
| keep | Keep |
| label | Label |
| origin.x | Translate X |
| origin.y | Translate Y |
---
### 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. |
| 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 |
| 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](/docs/nodes/copy-and-transform) or [Copy to Points](/docs/nodes/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](/docs/ui/parameters-panel/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.
1. Select any node in your graph.
2. Right-click the parameter you want to control (like Width in the Parameters panel).
3. Select "promote to controller".
4. 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.
1. **Enter edit mode**: Click icon.
2. **Organize**:
* Add folders: Click icon to create groups.
* Reorder: Drag controls using handle to reorder them or move them into/out of folders.
3. **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.
4. **Exit edit mode**: Click icon to save changes.
### Promoting attribute randomize groups
When promoting parameters from an Attribute [Randomize node](/docs/nodes/attribute-randomize) (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:
1. Connect a stream containing multiple shapes from a [Merge node](/docs/nodes/merge).
2. Use a [Group](/docs/nodes/group) node upstream to define a selection (name it "trash" or however your want).
3. In the Delete node, enter "trash" or use auto suggested group name in the Group parameter.
4. 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](/docs/nodes/scatter)), 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
1. 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.
2. 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.
3. Confirm Deletion: Release the mouse button. All highlighted edges will be permanently deleted.
4. Deactivate the Tool: Release Alt Shift C to return to the normal interaction mode.
## Shortcuts
---
### 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](/docs/nodes/artboard) 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. |
| Quality | Compression quality for raster formats. |
### Internal parameter names
These parameters can be used in:
- Expressions: =ref('node name', 'parameter name')
- Attribute randomize node, 'parameter' input.
| Parameter name | UI label |
| --- | --- |
| fileName | File Name |
| format | Format |
| label | Label |
| paramError | Param Error |
| quality | Quality |
## Usage
To use Export node, you **must** connect an [Artboard node](/docs/nodes/artboard) 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.
---
### 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](/docs/ui/parameters-panel/parameters-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 prodivdes a 100% SVG output 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 |
---
### 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 |
---
### Fuse
URL: https://animgraphlab.com/docs/nodes/fuse
Fuse node consolidates points that are close to each other into a single point. It can be used for stitching separate shapes together, or removing duplicate points after stich operation.
It operates by finding nearby points within a given Distance and snapping them to a single location.
## Parameters
| Parameter | Description |
| --- | --- |
| Label | The display name for the node. |
| Group | Subset of points to fuse. |
| Snap To | Determines which points are considered for fusing. |
| Target Position | Where fused points should snap to. |
| Distance | Fusion threshold distance. |
| Remove internal edges | Dissolves edges shared between fused shapes to create a single outline. |
### Internal parameter names
These parameters can be used in:
- Expressions: =ref('node name', 'parameter name')
- Attribute randomize node, 'parameter' input.
| Parameter name | UI label |
| --- | --- |
| distance | Distance |
| group | Group |
| label | Label |
| mode | Snap To |
| removeInternalEdges | Remove internal edges |
| target | Target Position |
### Merging shapes
You can use the Fuse node to join two separate shapes that are positioned next to each other.
1. Position two shapes (Rectangles) so their edges are close or overlapping.
2. Combine them using a [Merge](/docs/nodes/merge) node.
3. Connect the output to a Fuse node.
4. Increase the Distance until the points snap together.
### Remove internal edges
When two shapes touch (like two adjacent rectangles), they technically have two separate borders sharing the same space. The Remove Internal Edges toggle controls how this is handled:
* **Enabled (Weld Mode)**: This acts like a "Union" boolean operation. It detects shared boundaries and dissolves them, creating a single, continuous outline. This reduces the point count but treats the result as one single path.
Note: If shapes partially overlap, the 'Even-Odd' fill rule might create a hole where they intersect.
* **Disabled (Snap Mode)**: The shapes remain distinct objects/layers, but points are moved to the exact same coordinates.
* Best for Layering: Use this when placing one shape on top of another (Star on a Rectangle). It ensures they connect seamlessly without merging into a single path, preserving fills and preventing holes.
* Selection: You may notice overplapping points at one location. This is expected (subject of future change), as each shape retains its own corner point at that shared coordinate.
---
### Grain
URL: https://animgraphlab.com/docs/nodes/grain
The Grain node adds a customizable, procedural texture to the fill of any connected shape. It's useful for creating effects like film grain, noise, or stippling. The grain is applied as an overlay using a specified blend mode and is contained within a clipping area that can be manipulated with an interactive gizmo.
## Parameters
| Parameter | Description |
| --- | --- |
| Label | The display name for the node. |
| Size | The size of individual grain particles. |
| Amount | The number of grain particles in the pattern. |
| Opacity | The overall opacity of the grain effect. |
| Color | The color of the grain particles. |
| Jitter | The amount of random offset to apply to each grain particle. |
| Blend mode | The blend mode used to apply the grain. |
| Seed | A random seed to change the grain pattern. |
| Clip offset | The center position of the grain clipping area. |
| Scale | The size of the grain clipping area. |
| Clip rotation | The rotation of the grain clipping 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 |
| --- | --- |
| amount | Amount |
| blendMode | Blend mode |
| clipOffset.x | Translate X |
| clipOffset.y | Translate Y |
| clipRotation | Clip rotation |
| clipSize.x | Scale X |
| clipSize.y | Scale Y |
| color | Color |
| jitter | Jitter |
| label | Label |
| opacity | Opacity |
| seed | Seed |
| size | Size |
## Gizmo Controls
To activate the gizmo, select the Grain node and press Enter while your mouse is over the canvas. The gizmo provides handles for manipulating the clipping area where the grain is visible.
---
### 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.
### 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](/docs/nodes/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](/docs/nodes/copy-and-transform), or after [Copy to Points](/docs/nodes/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](/docs/nodes/transform), [Color](/docs/nodes/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 |
| 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. |
---
### Interpolate
URL: https://animgraphlab.com/docs/nodes/interpolate
Interpolate node generates intermediate steps between two or more shapes, creating a morphing (blend in Illustrator) effect.
## 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
### Creating a Morph between two shapes
1. Connect two or more shape nodes to the node input.
2. Adjust Steps parameter to control how many intermediate shapes are generated.
3. Use Input order list to define the sequence of morphing (e.g., Shape A -> Shape B -> Shape C).
### 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
{/if}
{#if filteredParamsKeys.length > 0}
## Parameters Panel
{/if}
{#if filteredNodeGraphKeys.length > 0}
## Node Graph
{/if}
{#if filteredCanvasKeys.length > 0}
## Canvas
{/if}
{#if filteredTimelineKeys.length > 0}
## Timeline / Animation
{/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
The Light node is a property 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.
## Understanding Point Lights
The Point Light creates a pseudo-3D effect by treating your 2D shape like a 3D terrain. 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 your shape's terrain.
* **High Scale:** Turns your shape into a steep, tall mountain peak. The light only hits the very tip, resulting in a **smaller, sharper light**.
* **Low Scale:** Turns your shape into a flat, gentle hill. The light washes over the surface, resulting in a **larger, softer light**.
**How to control the look:**
1. **Large light:** Scale (try 1-5), Z position (try 50-60), Intensity (try 2-3).
2. **Small light:** Scale (try 1-2), Z position (try 10), Intensity (try 2-3).
---
### 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. |
| 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 |
| end.x | X |
| end.y | Y |
| group | Group |
| halftone | Halftone |
| halftoneSize | Halftone size |
| 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 , <desc>, and custom inside <metadata> block.
Note: It must be connected before Artboard and Export nodes.
## Example output
xml
<svg xmlns="http://www.w3.org/2000/svg" ...>
<title>Some textSome long text about textAnimGraphLabMIT1.0.0...
## 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 |
| 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 |
| 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 |
---
### 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. |
| 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. |
| 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 |
| --- | --- |
| amplitude | Amplitude |
| frequency | Frequency |
| group | Group |
| label | Label |
| noiseType | Noise Type |
| offset.x | Offset X |
| offset.y | Offset Y |
| resample | Resample |
| seed | Seed |
---
### 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 an [Object merge](/docs/nodes/object-merge) 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 |
---
### Object merge
URL: https://animgraphlab.com/docs/nodes/object-merge
Object Merge node allows to bring geometry from other parts of your nodegraph into the current stream without drawing long, messy wires across. It acts as a "wireless" receiver.
It is designed to work exclusively with [Null](/docs/nodes/null) nodes. You typically place a Null node at the end of a logic chain (like a "Left Arm"), and then reference that Null node here to combine it into the final character 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 |
## Smart referencing
- **Auto-updating labels:** If you rename a target Null node like changing "OUT_Arm" to "OUT_Robot_Arm", the Object Merge 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 Object Merge will maintain the link as long as the specific Null node itself exists.
## Usage
---
### 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.
## 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'.
## Auto wiring
Abuse auto wiring feature as much as possible as it's the fastest way to connect nodes.
1. Select a node.
2. Use TAB or RMB to search node.
3. 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.
---
### Overview
URL: https://animgraphlab.com/docs/ui/parameters-panel/overview
Parameters panel is where you edit the properties of the currently selected node. 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](/docs/ui/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.
## Shortcuts
---
### 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](/docs/nodes/rectangle) always equal to the radiusX of a [Circle node](/docs/nodes/ellipse).
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
## Creating a Reference
1. In the Parameters Panel, hover over the parameter you want to use as the **source**.
2. Right-click to open the context menu and select **Copy Parameter**.
3. Navigate to a different node and hover over the **target** parameter you want to control.
4. 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
1. Context menu: RMB -> **Remove expression**.
2. 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
1. Adjust the node's parameters to your desired configuration.
2. Click the icon and select **"Save node preset"**.
3. 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
1. Configure a node exactly how you want your new default to be.
2. 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:
1. It will immediately reset the parameters of the currently selected node back to the original application defaults.
2. 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](/docs/nodes/scatter) 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:
1. pattern automatically calculates exactly how many rows/columns are needed to fill the boundary.
2. pattern is automatically centered inside the boundary.
3. 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](/docs/nodes/group), [Light](/docs/nodes/light), and [Transform](/docs/nodes/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" in other softwares allows you to draw freehand strokes directly in the viewport to create 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
- **To Draw**: Select a Pencil node. If it's empty, drawing mode will activate automatically. You can also double-click a Pencil node to start drawing. Click and drag on the canvas to create strokes.
- **To 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.
- **To Edit as Path**: To convert your drawing into an editable path with control points, hold Alt and double-click the Pencil node in the node graph. This will "bake" the center-line of your strokes into a new Path node.
## Styling
The 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 property 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 |
---
### 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. |
| 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 |
| group | Group |
| halftone | Halftone |
| halftoneSize | Halftone size |
| 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
---
### 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](/docs/nodes/copy-to-points), to instance other shapes.
It has two primary ways of scattering points:
1. fill: fills the interior area of a shape.
2. 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.
1. Select Scatter node in the graph.
2. Hover your mouse over the canvas.
3. 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](/docs/nodes/copy-and-transform) node operation that creates multiple shapes, or when you need to procedurally reference items from a [Merge node](/docs/nodes/merge).
## 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
The **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](/docs/nodes/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
The Shape Mixer is designed to work seamlessly with the [Merge](/docs/nodes/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.
You also can plug any number of shapes into Shape Mixer input itself.
---
### Sharing projects
URL: https://animgraphlab.com/docs/ui/dashbaord/sharing
AnimGraphLab allows to share your project by making it public which generate a shareable link.
This means that anyone with the link can view your project and copy it to their own workspace, and thus edit/modify their own copy.
This is a great because it allows to share your work or ask for help.
---
### 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.
---
### 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](/docs/nodes/separateShapes), 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.
1. Connect a stream containing multiple shapes (e.g., from a Merge node).
2. Enter the name of the shape(s) you want to keep in the **Group** field. You can use wildcards (e.g., Star*).
3. The node outputs only the matching shapes.
### Splitting Flow
To separate a stream into two distinct branches (A and B), use two Split nodes:
1. **Branch A:** Use a Split node selecting Group A.
2. **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](/docs/ui/canvas/overview) 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](/docs/nodes/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.
1. Select any row in the spreadsheet.
2. 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](/docs/ui/parameters-panel/pattern-matching) 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](/docs/nodes/subnetInput) and a [Subnet Output](/docs/nodes/subnetOutput) 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.
1. **Input (Optional)**: If nodes are connected to the Subnet in the parent graph, their data is passed to the Subnet Input node inside.
2. **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.
3. **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:
1. **From the search menu**: Press Tab or right-click in the graph and search for "Subnet". This creates a new, empty subnet.
2. **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.
3. **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](/docs/nodes/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](/docs/nodes/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
1. **Input 1 (False/Fallback)**: Connect your default geometry here (an error message via text node, a placeholder shape, or an empty stream).
2. **Input 2 (True/Target)**: Connect the main geometry you want to check.
3. **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](/docs/nodes/group), 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](/docs/nodes/path), [Rectangles](/docs/nodes/rectangle), [Spirals](/docs/nodes/spiral), 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:
1. **Text Source (Primary Input):** A [Text node](/docs/nodes/text) that defines the content, font family, weight, and styling.
2. **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](/docs/nodes/noise) node) will also animate the text flowing along it.
---
### Transform
URL: https://animgraphlab.com/docs/nodes/transform
Transform node is a property node that applies geometric transformations to its input. You can use it to move, scale, and rotate any shape or group of shapes without affecting their original parameters.
## 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. |
### 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 |
| 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](https://en.wikipedia.org/wiki/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](/docs/nodes/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. |
| Mode | Controls how multiple shapes are trimmed. "Individually" trims each shape from 0-100%. "Combined" treats all shapes as one continuous 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 |
| --- | --- |
| end | End |
| group | Group |
| label | Label |
| mode | Mode |
| offset | Offset |
| 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. Use the sidebar to navigate through the different components.
---
### 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](/docs/nodes/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](/docs/nodes/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](/docs/nodes/import) 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](#vectorize-groups) 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](https://en.wikipedia.org/wiki/Retopology)" 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.
1. Click **Add Group**.
2. Use **Pick from Canvas** to select the shapes you want to isolate.
3. 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](/docs/nodes/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. |
| Target group | Specifies a subset of shapes or points to deform. Supports wildcards (*, ?). |
| Mode | Choose the deformation method. |
| 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. |
| 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. |
### 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 | Target group |
| label | Label |
| mapFlipX | Flip X |
| mapFlipY | Flip Y |
| mapOffset.x | X |
| mapOffset.y | Y |
| mapRotation | Rotation |
| mapScale.x | X |
| mapScale.y | Y |
| mode | Mode |
| noiseOffset.x | X |
| noiseOffset.y | Y |
| paramError | Param Error |
| radial | Radial Displacement |
| resample | Resample |
| targetFace | Target face |
## 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.
* Map to Surface (3D): maps the flat 2D geometry directly onto the front, back, or wrapped sides of 3D geometry generated by an [Extrude 3D](/docs/nodes/extrude) node.
---