Active Live Preview (100% Compatible)
At real sizes
16
28
44
Loading…
Loading generator configurations...1. Geometry & Silhouette
Control outer boundary shapes, stroke diameters, and segment patterns.
Overall Size
140px
Stroke Thickness
12px
Outer Border Shape
Sweep Angle (Coverage)
100%
Limits rendering area (e.g., 50% = 180° Half Moon)
Stroke Cap Ends (Global)
Segmented / Dashed Ring
Divides the continuous ring into clean fragments
Segment Count
12
Dash Gap Size
6px
2. Colors, Fades & Caps
Define your transition spectrum, fades, and cap modifications.
Quick Gradient Presets
Tapered Tail
Gradually thins out sweep tail
Comet Fade
Smooth opacity fade to tail
Round Head Cap
Rounding at start of sweep
Round Tail Cap
Rounding at end of sweep
3. Motion Physics & Animators
Define your transition math, rotation directions, and secondary effects.
Spin Speed
1.5s
Sweep Direction
Easing Physics
Hue-Shift Color Cycle Speed
Disabled
Cycles color spectrum (0 = static colors, 1s = hyper-fast shifting)
Gradient Start Angle Offset
0°
Breathing Pulse
Gentle scaling loop
Reversing Sweep
Alternates back/forth
Mirror Reflection
Flips design horizontally
4. Tracing Path & Dynamic Morphing
Control background guide tracks and configure active path trim morphing.
Show Guide Track
Renders inactive base track outline
Track Opacity
15%
Track Color
#1E293B
Dynamic Trim Path (Morphing)
Active segment morphs length as it spins
When morphing is enabled, the sweep angle expands and contracts continuously (Material Design style) rather than rotating at a static, locked length.
5. Ambient Glows & Backdrop Settings
Overlay custom high-intensity backplates and configure test backdrops.
Enable Glow Layer
Soft radiant aesthetic backing
Glow Spread
16px
Blend Mode
Glow Override
Backdrop Simulator
Central Info Overlay