About Path Drawing Text
Path Drawing turns your typography into a beautifully animated SVG stroke reveal. Watch your text progressively draw itself from start to finish with a smooth gradient outline and precise control over typography, timing, stroke, positioning, and animation behavior.
Built specifically for Framer, it is lightweight, responsive, and designed to work smoothly across different frame sizes and fonts.
Great for
Hero headlines
Portfolio websites
Creative agency websites
Personal portfolios
Landing pages
Product launches
Fashion and editorial websites
Experimental typography
Loading and intro sequences
Interactive storytelling
Section transitions
Statement typography
Live Preview: https://pathdrawing.framer.website/
Features
✍️ Animated SVG path-drawing text
🌈 Custom two-color gradient stroke
🔤 Native Framer font picker
📏 Adjustable font size
🖊️ Adjustable stroke width
⏱️ Custom animation duration
🔁 Optional infinite looping
↔️ Left, center, and right alignment
↕️ Adjustable vertical position
📐 Adjustable drawing length
📱 Fully responsive
♿ Reduced-motion support
⚡ Lightweight CSS/SVG animation
🎨 Works with custom Framer fonts
🔒 Safe static-renderer behavior for Framer
🔄 Automatically adapts the drawing length to the selected text/font
The component uses Framer's native ControlType.Font alongside dedicated controls for text, font size, stroke width, duration, colors, looping, alignment, vertical position, and draw length.
Support
Need help using the component, customizing the animation, or integrating it into your Framer project?
X: @Karim Saif
Email: karimsaif010@gmail.com
For support, bug reports, customization questions, or feedback, feel free to reach out.
