SVG Path Draw

Installation

npx kinetic-ui-cli@latest add svg-path-draw

How It Works

The SvgPathDraw component leverages framer-motion's ability to natively animate SVG attributes. Specifically, it manipulates the stroke-dasharray and stroke-dashoffset CSS properties behind the scenes via the pathLength motion value. We wrap the container in a useInView hook with a negative margin so that the drawing animation triggers precisely when the component enters the user's viewport, making it perfect for hero sections or storytelling graphics.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { SvgPathDraw } from "@/components/creative/svg-path-draw";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { SvgPathDraw } from "@/components/creative/svg-path-draw";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <SvgPathDraw
        path="example"
        strokeColor="example"
        strokeWidth{10}
      />
    </div>
  );
}