---
title: "Curved Text SVG | FramerHub"
canonical_url: "https://framerhub.io/components/curved-text-svg"
last_updated: "2026-06-15T14:46:29.449Z"
meta:
  description: "Animate text along any SVG path with smooth GSAP-powered motion. Premium Framer component for client sites, portfolios, and product pages."
  "og:description": "Animate text along any SVG path with smooth GSAP-powered motion. Premium Framer component for client sites, portfolios, and product pages."
  "og:title": "Curved Text SVG | FramerHub"
---

# **Curved Text SVG **

Animate text along any SVG path with smooth GSAP-powered motion.

One-time payment

Lifetime updates

Commercial license

## **Overview** Animate text along any SVG path with smooth GSAP-powered motion. - Multiple preset path shapes (Circle, Ellipse, Wave, Arc, Line) - Custom SVG path support - GSAP-powered smooth animation - Extended font controls with full typography customization - Text effects (shadow, blur, opacity) - Background arc with customizable end caps ## Make Your Text Follow Any Path Transform ordinary text into captivating curved typography. The Curved Text SVG component lets you animate text along any SVG path—from simple waves to custom shapes—creating eye-catching headlines, logos, and decorative elements. ## Features**Multiple Path Presets** Choose from Circle, Ellipse, Wave, Arc, or Straight Line presets that automatically adapt to your component's dimensions.**Custom SVG Path Support** Use your own SVG path data for complete creative control. Perfect for brand logos, unique shapes, and custom designs.**Smooth GSAP Animation** Butter-smooth text scrolling powered by GSAP. Seamlessly loops without any visible jumps or stutters.**Full Typography Control** Extended font controls including family, size, weight, letter spacing, and more—all accessible directly in Framer's properties panel.**Visual Effects** Add depth with configurable text shadow, blur effects, and opacity adjustments.**Background Arc** Add a customizable background stroke behind your text path with color, opacity, thickness, and end cap style options (Round, Flat, Square). ## Use Cases**Hero Headlines** — Create attention-grabbing curved text for landing page headers**Logo Animations** — Animate brand text along custom paths for dynamic logos**Decorative Elements** — Add visual interest with text following waves or arcs**Ticker/Marquee** — Seamless looping text animation along circular or elliptical paths![Curved Text SVG Preview](https://framerhub.io/framerhub/img/components/control/curved-text-svg.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Curved Text SVG in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)**Text & Path**- **Text**: Your content with optional separator (use `•` or emoji for seamless loops) - **Path Shape**: Choose from presets or select "Custom" for your own path - **Custom Path**: Enter SVG path data (when Custom is selected) - **ViewBox**: Set the coordinate system for custom paths**Typography**- **Font**: Full font family, size, weight, and letter spacing control - **Color**: Text fill color - **Rotation**: Rotate the entire text path**Animation**- **Animate**: Enable/disable animation - **Duration**: Speed of text movement (1-60 seconds) - **Reverse**: Change animation direction**Background Arc**- **Show Background**: Toggle the background arc visibility - **BG Color**: Background arc color - **BG Opacity**: Background arc transparency - **BG Thickness**: Width of the background stroke - **BG End Cap**: Shape of arc ends (Round, Flat, Square) - **Text Y Offset**: Vertical adjustment to center text on the arc**Effects**- **Opacity**: Text transparency (0-1) - **Blur**: Add blur effect to text - **Shadow Blur**: Text shadow intensity - **Shadow Color**: Color of the text shadow ### Quick Tips**Seamless Loops** — Add a separator like `•` or `😁` at the end of your text for smooth continuous animation.**Custom Paths** — Generate SVG paths at svg-editor.griffen.codes or export from Figma/Illustrator.**Performance** — Keep path complexity reasonable. Simpler paths render faster.**Responsive Design** — The component automatically adapts preset paths to fill its container.**Debug Mode** — Enable "Show Path" to visualize the path while designing. ## License**Single Use License** — Use in unlimited client projects with full commercial rights. No redistribution. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Curved text effects add instant visual impact without complex workarounds. This component brings that creative freedom to Framer with no code required—just drag, drop, and customize. ---**Need Help?** Visit framerhub.io/support for documentation and video tutorials. ### **Curved Text SVG - $5** Animate text along any SVG path with smooth GSAP-powered motion.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub.