Pro Tips
Generative
Apr 27, 2025
0 views
A highly customizable SVG animation that draws multiple rotating ellipses in radial symmetry. Supports trim-path style reveals, gradient strokes, and responsive sizing—perfect for abstract loaders, hypnotic loops, animated backgrounds, and generative motifs.
//
Tags
Add SCAnimatedRadialEllipse to your canvas.
Choose sizing: Size Mode = fixed (px) or dynamic (% of container).
Set geometry: Count, Width/Height (or Width%/Height%), Width/Height Ratio.
Style strokes: Stroke Width/Color or enable Gradient Blend and set a unique Gradient ID.
Animate: toggle Animate → set Rotation direction/speed.
Trim window (optional): enable Trim Path, tune Trim Speed, Trim Offset, Trim Phase Start, and Mirror Trim.
Position: set Anchor and X/Y Offset.
(Debug) Toggle Show FPS during tuning; disable before publish.
Loader Minimal: count=9 · strokeWidth=1 · animate=on · trimPath=on · trimSpeed=0.006 · rotationSpeed=0.15 · gradient=off.
Hypnotic Halo: count=33 · strokeWidth=2 · gradient=on · ellipseRatioX=1 · ellipseRatioY=1.2 · animate=on · trimPath=on · mirrorTrim=on.
Low-Power Accent: count=13 · animate=on · trimPath=off · rotationSpeed=0.1 · strokeWidth=1.
Odd symmetry: Ensures an odd Count for balanced radial spacing (angleStep = 360/oddCount).
Sizing: Uses fixed px or container-relative % to compute actualWidth/Height; ratios (ellipseRatioX/Y) thin/flatten radii (rx = width/ratioX, ry = height/ratioY).
Rotation: Each ellipse receives a per-element transform: rotate(angle, cx, cy) where angle = index*step + rotation.
Trim window: Approximates ellipse perimeter with Ramanujan’s formula; applies strokeDasharray=perimeter and animates strokeDashoffset by a sinusoidal phase (supports Mirror Trim by offsetting half-perimeter).
Gradient: Optional <linearGradient id={gradientId}> stroked via url(#id)—unique IDs prevent collisions across instances.
Layout: ResizeObserver and a resize handler update container dimensions; anchor presets offset the cluster by quarter-frame steps plus X/Y offsets.
Cost scales with Count × Stroke effects. Keep strokeWidth ≤ 2–3px when Trim Path is on.
Prefer moderate Count (7–33 UI accents, 33–99 hero visuals).
Large gradients across many ellipses are expensive—reuse one gradient where possible.
Disable Show FPS for production.
Modern evergreen browsers (Chrome/Edge/Safari/Firefox).
SVG gradients and stroke-dash animations are broadly supported; verify on older mobile Safari if using heavy gradients.
Multiple instances on one page must use unique Gradient ID.
Decorative by default; if it conveys no information, wrap with aria-hidden="true".
In Text Mask scenarios (external), ensure readable contrast or provide a plain-text alternative nearby.
No network calls; no data stored.
Typed props; no dangerouslySetInnerHTML / eval.
No device permissions.
Cleanup note: event listeners created for resize are removed; ResizeObserver is disconnected on unmount.
Decorative by default; if it conveys no information, wrap with aria-hidden="true".
In Text Mask scenarios (external), ensure readable contrast or provide a plain-text alternative nearby.
No network calls; no data stored.
Typed props; no dangerouslySetInnerHTML / eval.
No device permissions.
Cleanup note: event listeners created for resize are removed; ResizeObserver is disconnected on unmount.
Concept, implementation, and Framer adaptation by SecretoCho Design.
Ellipse trim math uses a Ramanujan-style circumference approximation.
SecretoCho Design 2025
Provided “as is” for visual/UX purposes. Validate performance, accessibility, and visual contrast on your target devices and layouts.
Stay ahead of the curve with insights into emerging visualization trends and technologies.