A highly-optimized component that brings your vector graphics to life with smooth, cinematic drawing effects.
Zero-Code Input: Choose your workflow. Upload an .svg file directly from your computer, or paste your raw SVG code.
Smart Fill Modes: Automatically match your SVG's fill color to the drawing stroke, set a custom fill, or preserve the original artwork's colors.
Precision Timing: Complete control over Duration, Delay, and Stagger to create sequential drawing effects.
Easing: Includes 7 easing curves (from Linear to Power 4 to playful Bounce and Elastic outs) so you can match the animation to your brand's specific feel.
Flawless Scaling: Built-in "ViewBox Rescue" ensures your SVGs scale perfectly within any Framer layout block.
Drop it in and add your SVG. A built-in parser instantly sanitizes messy code, while the GSAP DrawSVG plugin handles the complex math to deliver beautiful stroke animations.
A highly-optimized component that brings your vector graphics to life with smooth, cinematic drawing effects.
Zero-Code Input: Choose your workflow. Upload an .svg file directly from your computer, or paste your raw SVG code.
Smart Fill Modes: Automatically match your SVG's fill color to the drawing stroke, set a custom fill, or preserve the original artwork's colors.
Precision Timing: Complete control over Duration, Delay, and Stagger to create sequential drawing effects.
Easing: Includes 7 easing curves (from Linear to Power 4 to playful Bounce and Elastic outs) so you can match the animation to your brand's specific feel.
Flawless Scaling: Built-in "ViewBox Rescue" ensures your SVGs scale perfectly within any Framer layout block.
Drop it in and add your SVG. A built-in parser instantly sanitizes messy code, while the GSAP DrawSVG plugin handles the complex math to deliver beautiful stroke animations.
