Overview
sEllipse is the second primitive shape (after sRectangle) of the Shape system. It generates a parametric circle/ellipse with the same options as sRectangle: Fill, Outline, Border Width, Length for write-ons.
The ellipse's specific strength: Length creates an arc (a circular segment), and Position sets where the arc opens. Animate these two parameters = an arc that spins or fills up, the basic visual pattern of UI loaders.
Where to find this node
- Effects Library:
Tools > Shape > sEllipse - Quick add: right-click in the Node Editor →
Add Tool > Shape > sEllipse
Inputs
- No input required - a pure generator.
- An optional input if you chain it with another shape node upstream.
Setup
Simple circle: sEllipse (Width = Height) → sRender → Merge 2D FG Circular loader (spinning arc): sEllipse (Solid OFF, Border Width 0.005, Length 0.25, Position animated 0→1) → sRender → Merge Donut (solid ring): large sEllipse → sBoolean Subtract ← small sEllipse → sRender Ring/Halo: sEllipse (Solid OFF, high Border Width) → sRender → Glow → Merge Screen
Controls tab
- Width / Height
- Dimensions. Width = Height = a perfect circle. Different values = a stretched ellipse.
- Angle
- Rotation of the ellipse around its center (only useful when Width ≠ Height).
- Solid
- On = filled. Off = outline only (ring / hollow circle).
- Border Width
- Outline thickness. Mostly relevant when Solid is off, but it also affects the write-on stroke.
- Offset (X / Y)
- Position of the center.
- Length
- 1.0 = a closed circle. < 1.0 = an arc (part of a circle). Animatable for radial reveals.
- Position
- Position of the arc opening along the circle. 0 = on the right (3 o'clock), 0.25 = at the bottom (6 o'clock), etc. Animatable for a spinning arc.
- Cap Style
- Ends of the outline when Length < 1: Flat, Round, Square.
- Allow Combining
- Handles the alpha when shapes overlap (useful in an sBoolean).
Arc animations with Length and Position
The Length + Position combination is the signature feature of sEllipse:
- Length animated 0 → 1
- The arc draws itself progressively = a circular write-on reveal. A classic for "drawing" effects or counters that fill up.
- Position animated 0 → 1 with a fixed Length
- A segment of constant length that spins around the center. That is the spinner / UI loader animation.
- Both animated
- A Material Design style loader: the arc grows then shrinks while it spins. A combination of both animations.
Style tab
- Fill Color - the fill color (if Solid is on).
- Border Color - the outline color.
- Gradient options - a linear or radial gradient fill.
Use cases
- UI loader / spinner - sEllipse with Solid OFF, Length 0.25, Position animated 0→1 in a loop = a Material Design circular loader.
- Radial counter / progress ring - Length animated 0→1 over the length of a progress = a circle that fills up. A classic for stats / app UIs.
- Iris reveal - sEllipse used as a mask through a Matte Control = a camera aperture effect that opens/ closes.
- Sci-fi ring / halo - a high Border Width + Solid OFF + a Glow downstream = an energy ring.
- Donut / solid ring - large sEllipse + sBoolean Subtract + small sEllipse = a color-filled ring, a clean shape.
- Bubble / dot - a filled circle as a notification background, a badge, a color dot.
- Animated circular logo - several sEllipse nodes with offset arcs spinning = a complex logo animation.
Tips
- For a perfect circle: Width = Height exactly. Even a 0.001 difference produces a visible ellipse at high resolution.
- Length 0.25, a spinning Position = the classic loader. Position animated from 0 to 1 over 1-2 seconds, loopable = an ideal UI spinner.
- Cap Style Round for arcs with a modern / friendly look (Material, iOS), Flat for a technical / broadcast look.
- Animate 2 sEllipse nodes in opposite directions for a dynamic "double ring" effect (UFO loaders, sci-fi portals).
- Proportional Border Width - a border that is too thin disappears at low resolution. Double the border if you scale the render down.
- Combine with sTransform - spin the whole ellipse (not just the arc) with an sTransform downstream = a two-level animation.
- For a quick perfect circle, use sRectangle with Corner Radius 1.0 and Width = Height - same result, sometimes handier if you want to switch to a rounded rectangle in the same timeline.
