SVG Shapes Animated

Installation

pnpm
npmyarnbun
Copy
pnpm dlx shadcn@latest add https://cult-ui.com/r/svg-shapes-animated.json

Usage

Each export is a client component ("use client") that wraps stroked paths in motion elements. Animations use whileInView with pathLength from 0 → 1 so lines draw when the SVG enters the viewport. useReducedMotion() skips the animation and shows finished paths immediately.

Copy
import { GothicArchPanelSvg } from "@/components/ui/svg-shapes-animated"
 
export function Hero() {
  return (
    <div className="text-foreground/50 w-full max-w-4xl">
      <GothicArchPanelSvg />
    </div>
  )
}

Props

Requires the motion package (motion/react), declared as a registry dependency when installing via CLI.

Compared to SVG Shapes

• Animated: scroll-draw strokes, slightly different default stroke emphasis, extra shapes (diamond, trapezoid, octagon, ribbon panels, wireframe naming *WireframeSvg, etc.).
• Static (svg-shapes): no Motion dependency, passive SVGs suitable anywhere including server components.

Notes

• Sacred-geometry and multi-path shapes stagger short delays per sub-path for a sequential draw feel.
• Ensure the preview or page scrolls enough for elements to cross the in-view threshold; embed in a tall section or scroll container as needed.