FL Create Shape Image On Path
Animate a shape along coordinates you specify
- image
- mask
Sibling to FL_AnimatedShapePatterns, but with a different philosophy: where that node picks from six built-in algorithmic motion patterns, this one takes an explicit coordinates JSON - you (or an upstream script/node) define exactly where the shape's center sits on every single frame, and it renders precisely that. Less "generate a pattern," more "animate this shape along the exact path I already worked out" - useful when the motion needs to hit specific marks, like following a tracked point or matching a beat map, rather than looping an algorithm.
How it works
Per frame, it draws one shape (circle/square/triangle) centered at that frame's coordinate, sized by shape_width/shape_height, colored with shape_color against bg_color, with optional blur_radius for edge softness and intensity scaling opacity/strength. Per the node's own description, "locations are center locations" - the coordinates you provide place the shape's center point, not a corner.
The inputs and outputs that matter
Required: shape, coordinates - the JSON path data, and the field that actually drives the animation; everything else here is styling - frame_width/frame_height (canvas size, default 512), shape_width/shape_height (default 128, and independent of each other - you can draw an ellipse-shaped "circle" selection by setting them unequal), shape_color/bg_color (plain color strings), blur_radius (0–100), intensity (0.01–100, default 1).
Optional: size_multiplier - a FLOAT that defaults to the single-item list [1], meaning the node is built to accept a list of per-frame size values rather than only a single constant (a list longer than one scales the shape differently frame by frame); trailing (0–10, default 1) - motion-blur-style trailing behind the shape's movement; border_width/border_color - an outline ring independent of shape_color.
Outputs: image and mask - the same pairing as FL_AnimatedShapePatterns, so you can composite the shape onto other footage, or use the mask as a moving region selector for downstream conditioning.
How to install it
ComfyUI Manager: search ComfyUI_Fill-Nodes, install, restart. Or:
cd ComfyUI/custom_nodes
git clone https://github.com/filliptm/ComfyUI_Fill-Nodes
then restart. No extra dependencies beyond PIL and numpy for this specific node - no models, no API keys.
Common issues & troubleshooting
Errors on the coordinates field, or nothing draws. coordinates has no sensible default in the schema - you have to supply valid JSON with a coordinate per frame yourself. If you don't have a path source in hand, this isn't the node to reach for; use FL_AnimatedShapePatterns instead and pick one of its six built-in algorithms (spiral or orbital are good starting points), which needs no path data at all.
Output has fewer or more frames than expected. The node draws one shape state per entry in coordinates - if your path data has fewer points than you expected frames, you'll get a shorter clip. Count your path entries before assuming a bug.
Shape looks squashed or the wrong aspect. Check shape_width against shape_height - they're independent fields, so selecting circle with mismatched width and height renders an oval, not a circle. Easy to miss if you only adjusted one of the two while testing.
Inputs (14)
| Name | Type | Default | Description |
|---|---|---|---|
| shape | COMBO | circle | 3 options: circle, square, triangle |
| coordinates | STRING | — | |
| frame_width | INT | 51216–4096 | — |
| frame_height | INT | 51216–4096 | — |
| shape_width | INT | 1282–4096 | — |
| shape_height | INT | 1282–4096 | — |
| shape_color | STRING | white | — |
| bg_color | STRING | black | — |
| blur_radius | FLOAT | 0.00–100 | — |
| intensity | FLOAT | 1.000.01–100 | — |
| size_multiplieropt | FLOAT | 1 | — |
| trailingopt | FLOAT | 1.000–10 | — |
| border_widthopt | INT | 00–100 | — |
| border_coloropt | STRING | black | — |
Outputs (2)
| Name | Type | Description |
|---|---|---|
| image | IMAGE | — |
| mask | MASK | — |