Svg Text

Text 23

About

Display text with animated SVG backgrounds. Perfect for creating dynamic text effects with custom SVG graphics and animations.

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

Code

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

Usage.tsx

import { SvgText } from '@/components/ui/svg-text';

const LiquidSvg = () => (
  <svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="liquidGradient" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor="#3b82f6" />
        <stop offset="50%" stopColor="#1e40af" />
        <stop offset="100%" stopColor="#3b82f6" />
      </linearGradient>
      <linearGradient id="waveGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stopColor="#3b82f640" />
        <stop offset="50%" stopColor="#1e40af80" />
        <stop offset="100%" stopColor="#3b82f660" />
      </linearGradient>
      <linearGradient id="waveGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stopColor="#1e40af30" />
        <stop offset="50%" stopColor="#3b82f650" />
        <stop offset="100%" stopColor="#1e40af40" />
      </linearGradient>
    </defs>

    {/* Background liquid */}
    <rect width="100%" height="100%" fill="url(#liquidGradient)" />

    {/* Animated wave layer 1 */}
    <path fill="url(#waveGradient1)" opacity="0.6">
      <animate
        attributeName="d"
        dur="3s"
        repeatCount="indefinite"
        values="M0,100 Q100,80 200,100 T400,100 L400,200 L0,200 Z;
                M0,100 Q100,120 200,100 T400,100 L400,200 L0,200 Z;
                M0,100 Q100,80 200,100 T400,100 L400,200 L0,200 Z"
      />
    </path>

    {/* Animated wave layer 2 */}
    <path fill="url(#waveGradient2)" opacity="0.4">
      <animate
        attributeName="d"
        dur="4s"
        repeatCount="indefinite"
        values="M0,120 Q150,100 300,120 T600,120 L600,200 L0,200 Z;
                M0,120 Q150,140 300,120 T600,120 L600,200 L0,200 Z;
                M0,120 Q150,100 300,120 T600,120 L600,200 L0,200 Z"
      />
    </path>

    {/* Surface waves */}
    <path fill="url(#waveGradient1)" opacity="0.3">
      <animate
        attributeName="d"
        dur="2s"
        repeatCount="indefinite"
        values="M0,90 Q200,70 400,90 L400,110 Q200,130 0,110 Z;
                M0,90 Q200,110 400,90 L400,110 Q200,90 0,110 Z;
                M0,90 Q200,70 400,90 L400,110 Q200,130 0,110 Z"
      />
    </path>

    {/* Floating bubbles */}
    <circle r="3" fill="#ffffff40">
      <animateMotion dur="6s" repeatCount="indefinite" path="M50,150 Q200,50 350,150 Q200,100 50,150" />
    </circle>
    <circle r="2" fill="#ffffff30">
      <animateMotion dur="8s" repeatCount="indefinite" path="M100,170 Q250,70 400,170 Q250,120 100,170" />
    </circle>
    <circle r="4" fill="#ffffff20">
      <animateMotion dur="5s" repeatCount="indefinite" path="M150,160 Q300,60 450,160 Q300,110 150,160" />
    </circle>
    <circle r="1.5" fill="#ffffff50">
      <animateMotion dur="7s" repeatCount="indefinite" path="M80,140 Q220,80 360,140 Q220,90 80,140" />
    </circle>
  </svg>
);

export default function DemoOne() {
  return (
    <div className="flex items-center justify-center">
      <SvgText svg={<LiquidSvg />} fontSize="12rem" fontWeight="900">
        REUI.IO
      </SvgText>
    </div>
  );
}