Circle

This node renders a circular shape or arc.

The Circle node draws vector graphics for circles, rings, and pie segments.

The Circle node renders an SVG circle. It supports fill, stroke (border), and start/end angles, allowing you to create full circles, donuts, or arcs (like a progress ring).

Inputs

Dimension

Data	Description
Size	Diameter of the circle in pixels.

Fill

Data	Description
Fill	Boolean. Enable fill color.
Fill Color	The interior color.

Stroke

Data	Description
Stroke	Boolean. Enable border line.
Stroke Width	Thickness of the line.
Stroke Color	Color of the line.
Line Cap	"Butt" (flat) or "Round" (rounded ends for arcs).

Style (Arcs)

Data	Description
Start Angle	Starting degree (0-360).
End Angle	Ending degree (0-360).

Outputs

General

Data	Description
Node Reference	Reference to the SVG element.

Usage

Simple Dot

1. Size: 20.
2. Fill: True, Color: Red.
3. Stroke: False.

Progress Ring

1. Fill: False.
2. Stroke: True, Width: 10, Color: Blue.
3. Start Angle: 0.
4. Connect a variable (0-360) to End Angle to animate progress.

Detailed Behavior

• SVG: Renders as an <svg> element.
• Angles: 0 degrees is usually at the top or right depending on implementation (check visually).

Troubleshooting

• Clipped: If Stroke Width is large, ensure the container has enough padding or the size includes the stroke.