Draw SVG

Animate SVG path drawing with GSAP’s DrawSVGPlugin support.

0px

Live Playground · Edit and see changes instantly

Or edit with AI support by

Open in

import {DrawSVG} from "@/components/phucbm/draw-svg";

export default function Example() {
    return (
        <div className="min-h-screen bg-red-50 flex flex-col items-center justify-center
        gap-10 px-10 py-10 xl:gap-40 xl:py-40
        xl:[&_svg]:w-40 [&_svg]:w-32 xl:[&_svg]:h-40 [&_svg]:h-32 [&_svg]:text-blue-500
        ">

            <div className="grid grid-cols-2 gap-10 xl:gap-40">
                <DrawSVG duration={3}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                         className="icon icon-tabler icons-tabler-outline icon-tabler-olympics">

                        <path d="M6 9m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/>
                        <path d="M18 9m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/>
                        <path d="M12 9m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/>
                        <path d="M9 15m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/>
                        <path d="M15 15m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/>
                    </svg>
                </DrawSVG>
                <DrawSVG duration={3}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                         className="icon icon-tabler icons-tabler-outline icon-tabler-cpu">

                        <path d="M5 5m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z"/>
                        <path d="M9 9h6v6h-6z"/>
                        <path d="M3 10h2"/>
                        <path d="M3 14h2"/>
                        <path d="M10 3v2"/>
                        <path d="M14 3v2"/>
                        <path d="M21 10h-2"/>
                        <path d="M21 14h-2"/>
                        <path d="M14 21v-2"/>
                        <path d="M10 21v-2"/>
                    </svg>
                </DrawSVG>
                <DrawSVG duration={2} atOnce={true}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                         className="icon icon-tabler icons-tabler-outline icon-tabler-aperture">
                        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/>
                        <path d="M3.6 15h10.55"/>
                        <path d="M6.551 4.938l3.26 10.034"/>
                        <path d="M17.032 4.636l-8.535 6.201"/>
                        <path d="M20.559 14.51l-8.535 -6.201"/>
                        <path d="M12.257 20.916l3.261 -10.034"/>
                    </svg>
                </DrawSVG>

                <DrawSVG duration={2} atOnce={true}>
                    <svg xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M4.073 21c4.286 -2.756 5.9 -5.254 7.927 -9"/>
                        <path
                            d="M12.432 17.949c.863 1.544 2.589 1.976 4.13 1.112c1.54 -.865 1.972 -2.594 1.048 -4.138c-.185 -.309 -.309 -.556 -.494 -.74c.247 .06 .555 .06 .925 .06c1.726 0 2.959 -1.234 2.959 -2.963c0 -1.73 -1.233 -2.965 -3.02 -2.965c-.37 0 -.617 0 -.925 .062c.185 -.185 .308 -.432 .493 -.74c.863 -1.545 .431 -3.274 -1.048 -4.138c-1.541 -.865 -3.205 -.433 -4.13 1.111c-.185 .309 -.308 .556 -.432 .803c-.123 -.247 -.246 -.494 -.431 -.803c-.802 -1.605 -2.528 -2.038 -4.007 -1.173c-1.541 .865 -1.973 2.594 -1.048 4.137c.185 .31 .308 .556 .493 .741c-.246 -.061 -.555 -.061 -.924 -.061c-1.788 0 -3.021 1.235 -3.021 2.964c0 1.729 1.233 2.964 3.02 2.964"/>
                    </svg>
                </DrawSVG>

                <DrawSVG duration={5}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

                        <path d="M10 19a2 2 0 1 0 -4 0a2 2 0 0 0 4 0z"/>
                        <path d="M18 5a2 2 0 1 0 -4 0a2 2 0 0 0 4 0z"/>
                        <path d="M10 5a2 2 0 1 0 -4 0a2 2 0 0 0 4 0z"/>
                        <path d="M6 12a2 2 0 1 0 -4 0a2 2 0 0 0 4 0z"/>
                        <path d="M18 19a2 2 0 1 0 -4 0a2 2 0 0 0 4 0z"/>
                        <path d="M14 12a2 2 0 1 0 -4 0a2 2 0 0 0 4 0z"/>
                        <path d="M22 12a2 2 0 1 0 -4 0a2 2 0 0 0 4 0z"/>
                        <path d="M6 12h4"/>
                        <path d="M14 12h4"/>
                        <path d="M15 7l-2 3"/>
                        <path d="M9 7l2 3"/>
                        <path d="M11 14l-2 3"/>
                        <path d="M13 14l2 3"/>
                        <path d="M10 5h4"/>
                        <path d="M10 19h4"/>
                        <path d="M17 17l2 -3"/>
                        <path d="M19 10l-2 -3"/>
                        <path d="M7 7l-2 3"/>
                        <path d="M5 14l2 3"/>
                    </svg>
                </DrawSVG>

                <DrawSVG>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <path
                            d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/>
                    </svg>
                </DrawSVG>
                <DrawSVG duration={3}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                         className="icon icon-tabler icons-tabler-outline icon-tabler-ikosaedr">

                        <path
                            d="M21 8.007v7.986a2 2 0 0 1 -1.006 1.735l-7 4.007a2 2 0 0 1 -1.988 0l-7 -4.007a2 2 0 0 1 -1.006 -1.735v-7.986a2 2 0 0 1 1.006 -1.735l7 -4.007a2 2 0 0 1 1.988 0l7 4.007a2 2 0 0 1 1.006 1.735"/>
                        <path d="M3.29 6.97l4.21 2.03"/>
                        <path d="M20.71 6.97l-4.21 2.03"/>
                        <path d="M20.7 17h-17.4"/>
                        <path d="M11.76 2.03l-4.26 6.97l-4.3 7.84"/>
                        <path d="M12.24 2.03q 2.797 4.44 4.26 6.97t 4.3 7.84"/>
                        <path d="M12 17l-4.5 -8h9z"/>
                        <path d="M12 17v5"/>
                    </svg>
                </DrawSVG>

                <DrawSVG reverse={true}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1"/>
                    </svg>
                </DrawSVG>

                <DrawSVG reverse={true}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                         className="icon icon-tabler icons-tabler-outline icon-tabler-fingerprint">

                        <path d="M18.9 7a8 8 0 0 1 1.1 5v1a6 6 0 0 0 .8 3"/>
                        <path d="M8 11a4 4 0 0 1 8 0v1a10 10 0 0 0 2 6"/>
                        <path d="M12 11v2a14 14 0 0 0 2.5 8"/>
                        <path d="M8 15a18 18 0 0 0 1.8 6"/>
                        <path d="M4.9 19a22 22 0 0 1 -.9 -7v-1a8 8 0 0 1 12 -6.95"/>
                    </svg>
                </DrawSVG>
            </div>

        </div>
    );
}

Installation

pnpm dlx shadcn@latest add @phucbm/draw-svg

Props

Name	Type	Default
`children`	`ReactNode` React children containing the SVG element to animate
`className`	`string` Additional CSS classes to apply to the wrapper div
`timelineConfig`	`TimelineVars` GSAP Timeline configuration. Overrides defaults when provided.	`{ scrollTrigger: { start: "top 80%", end: "top 50%", toggleActions: "play none none reverse" }}`
`duration`	`number` Total duration of the animation in seconds.	`1.5`
`reverse`	`boolean` Animate paths in reverse (from drawn to hidden).	`false`
`loop`	`boolean` Enable infinite looping with yoyo effect.	`false`
`atOnce`	`boolean` Animate all paths simultaneously instead of sequentially.	`false`
`onTimelineReady`	`(timeline: Timeline) => void` Callback fired when the GSAP timeline is ready for manual control

Test with your SVG

Download or copy the SVG files and test them directly here. You can choose icons from Lucide or Tabler .

Interactive Playground

Open in

If you create your own SVGs, note that only <path> elements are supported for drawing - other SVG elements such as <circle>, <line>, or <ellipse> are either untested or not drawable.

3.5rem

1rem