Animated SVG Text Path

Text 86

About

lets you effortlessly bring text to life by animating it along any SVG path within your React applications. This component, part of the EaseMize UI library, leverages the GreenSock Animation Platform (GSAP) for high-performance, smooth animations. Customize the text, animation duration, direction (forwards/reversed), font size, letter spacing, the SVG path data, viewBox, and rotation. It's designed to be highly flexible, allowing developers to add sophisticated text-on-a-path animations with ease.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated SVG Text Path to your project and fits it to your theme.

Code

How Animated SVG Text Path is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AnimatedTextPath } from "@/components/ui/animated-svg-text-path";

const DemoOne = () => {
  return (
     <AnimatedTextPath
        text="looping SVG Text Path. Any Shape And it Still Animates In Any Path."
        duration={18}
        reversed={false}
        fontSize="16px"
        letterSpacing="0.2px"
        rotation={40}
      />
  )
  ;
};

const DemoTwo = () => {
  return (
     <AnimatedTextPath
        text="looping SVG path . Make any shape You want and add text to it ."
        duration={18}
        reversed={false}
        fontSize="16px"
        letterSpacing="0.2px"
        rotation={20}
        svgPath="M 80 110 C 80 50, 130 50, 140 110 C 150 170, 200 170, 200 110 C 200 50, 150 50, 140 110 C 130 170, 80 170, 80 110"
      />
  )
  ;
};

export { DemoOne, DemoTwo };