SVG Stroke Trace
An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.
Live props— this is the component running, not a video
- Job
- reveal
- Family
- intros-and-reveals
- Sync points
- trace-complete @ 1.55s
- Default duration
- 3.5s
- Frame rate
- 30 fps
- Engine
- Remotion / React
- Background
- Transparent — composites over any scene
Use it
Ask the agent. It copies this component into your project and edits it there — nothing to install, and rendering happens in the cloud.
“Add the svg-stroke-trace scene to my video and set its props to match my brand.”
Customize in Studio
Adapt the content, styling, timing, and layout to fit your project.
Related
All annotations & calloutsWhiteboard Ink
A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token.
ASCII Trail Reveal
An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.
Facet Morph
A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold.
Locked Nucleus Orbit
A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.
Outline Draw
A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.
Tracing Beam
A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.
Adapted from the HyperFrames registry, © HeyGen, Apache 2.0.