Handwriting SVG

Text 433

About

An SVG that draws itself on mount, rendering custom paths or converting text into animated handwriting strokes.

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

Code

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

Usage.tsx

import { HandwritingSvg } from "@/components/ui/handwriting-svg";

export default function Default() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center">
      <HandwritingSvg
        text="Hello"
        width={320}
        height={160}
        fontSize={72}
        strokeWidth={1}
        duration={2.5}
        className="text-rose-500"
      />
    </div>
  );
}