Animated SVG Background

Heroes 134

About

This React component generates an animated background using multiple SVG paths with varying colors and animations. The animation involves a dash offset effect creating the illusion of lines drawing and fading. It uses the `motion` library for smooth animations and accepts optional props to customize the animation duration.

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

Code

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

Usage.tsx

import { BackgroundLines } from "@/components/ui/animated-svg-background";

export default function DemoOne() {
  return <BackgroundLines className="flex items-center justify-center w-full flex-col px-4">
      <h2 className="bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight">
        Sanjana Airlines, <br /> Sajana Textiles.
      </h2>
      <p className="max-w-xl mx-auto text-sm md:text-lg text-neutral-700 dark:text-neutral-400 text-center">
        Get the best advices from our experts, including expert artists,
        painters, marathon enthusiasts and RDX, totally free.
      </p>
    </BackgroundLines>
}