[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useEffect } from "react" export default function Home() { useEffect(() => { const path = document.querySelector("#XMLID_226_") as SVGPathElement if (path) { path.style.transition = "stroke-dashoffset 10s linear" path.style.strokeDashoffset = "0" } }, []) return (

) } [V0_FILE]css:file="app/globals.css" body { background: black; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { max-width: 300px; width: 100%; } svg { display: block; } #XMLID_226_ { stroke-dasharray: 600; stroke-dashoffset: 600; stroke: #880e4f; stroke-width: 2; stroke-linejoin: square; stroke-linecap: butt; } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "SVG Animation", description: "SVG Animation using React and Next.js", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }