Background Paths

A set of SVG paths that animate as if being drawn. Great for tech hero backgrounds.

Installation

npx shadcn@latest add @scrollxui/background-paths

Usage

import { BackgroundPaths } from '@/components/ui/background-paths';

<BackgroundPaths className='h-128' svgOptions={{ duration: 8 }}>
  <h1 className='text-white text-4xl font-bold text-center'>Welcome</h1>
</BackgroundPaths>

API Reference

BackgroundPaths

The BackgroundPaths component renders a animated SVG paths ideal for tech-style hero sections. Adapts seamlessly to light and dark themes.

Props

Property	Type	Default	Description
`className`	string	`—`	Optional styling for the outer container.
`children`	ReactNode	`—`	Overlay content rendered above the animated background.
`svgOptions`	{ duration?: number }	`—`	Options to customize SVG animation.
`svgOptions.duration`	number	`6`	Total duration (in seconds) of SVG path animations.