Aller au contenu

sEllipse Node

By Kriss Norde

sEllipse generates a vector circle or ellipse. Width = Height gives a perfect circle; different values give an ellipse. Its ability to create arcs you can animate with Length/Position makes it a tool of choice for loaders, circular reveals and radial reveal animations.

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.