🎯 What It Is
A creative tool that allows you to wrap text along a custom path—whether predefined (e.g., wave, arc, circle, oval, spiral, line) or fully custom using your own SVG shape.
▶️ Core Controls
Text: Type your desired text or insert dynamic content.
Path Type: Choose from preset shapes (wave, arc, circle, line, oval, spiral) or select “Custom” to upload your own SVG.
SVG Upload: When using Custom path, upload an SVG file to define the curve.
Link: Make the text clickable by adding a URL or using dynamic links.
Alignment: Define how the text aligns within the path container (left, center, right).
Direction: Set text flow as left-to-right or right-to-left.
Show Path: Toggle to reveal the handler path visually, useful for design adjustments.
🎨 Style Options
Container Settings
Size: Adjust the size of the path container in pixels or percentage.
Rotate: Rotate the entire path container to fine-tune text curvature.
Text Controls
Typography: Customize font family, size, weight, style, and more via standard typography settings.
Word Spacing: Control spacing between words, measured in percentages.
Starting Point: Slide to position where the text begins along the path.
Color: Set text color separately for normal and hover states.
Hover Effects: Activate different color or style when text is hovered.
Path Appearance
Visible only when “Show Path” is turned on:
Fill Color: Color fill inside the path shape (ideal for closed shapes).
Stroke Color & Width: Style the outline of the path, with options to adjust thickness.
🛠️ How to Use It
Add the Widget: Drag Text Path into your layout.
Choose Path and Text: Select path type, add text, align and orient.
Style It: Under Style, set container size, rotation, typography, spacing, and colors; activate hover styles.
Reveal Path (optional): Toggle path visibility to tweak fill and stroke.
Add Effects (optional): Use motion effects to animate text or path on scroll or hover (via Motion Effects panel).
💡 Best Practices
Use starting point slider to center or balance your text along curved paths.
Pick closed shapes (circle, oval, spiral) when fill color is desired.
Enable hover effects to create interactive and engaging text visuals.
Choose path rotation to fine-tune text rhythm and flow.
Keep typography bold and clear for maximum visibility and impact.
📝 Ideal Use Cases
Create badges or seals with text wrapping around shapes.
Design circular logos or decorative headings.
Add curved callouts or slogans for branding emphasis.
Use scroll-triggered motion effects on curved text for added engagement.
The Text Path widget gives you powerful control over creative text layouts—letting you bend, curve, style, and animate text without writing any code.