# Svg Draw
Draws any set of SVG paths on stroke by stroke, staggered, with an optional fill fade once each finishes.
```bash
npx shadcn add https://www.reelcn.dev/r/svg-draw.json
```
Usage:
```tsx
```
Use for:
- A logo mark, icon or custom illustration drawing itself on screen
- Sketching a diagram or shape that a `callout` or label then points at
Avoid:
- A single hand-drawn circle or arrow. Use `scribble-circle` or `arrow`
## Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| delay? | `number` | — | Frames to wait before entering. |
| duration? | `number` | — | Enter duration in frames. Defaults to 0.6s. Some items reuse `duration` for an unrelated local timing. See that item's own prop docs. |
| exit? | `number \| boolean` | — | Exit at the end of the parent ``. `false` keeps it on screen, a number sets the exit length in frames. |
| motion? | `MotionPersonality` | — | Override the theme's motion personality. |
| poster? | `boolean` | — | Renders fully entered, with no exit: for a still frame or thumbnail. Defaults to `false`. |
| holdFrames? | `number` | — | Delays the start of the exit window by this many frames, for a minimum on-screen hold. Defaults to `0`. |
| paths | `string[]` | — | One or more `d` attributes, drawn in order. |
| viewBox | `string` | — | Must be space- or comma-separated: `"minX minY width height"`. |
| color? | `string` | — | Stroke color. Defaults to the theme foreground. |
| strokeWidth? | `number` | `3` | In `viewBox` units, not design units, it scales with the drawing, like an icon's stroke. |
| step? | `number` | — | Frames between one path's draw and the next. Defaults to 0.15s. |
| size? | `number` | `200` | Rendered width in design units. Height follows the `viewBox` ratio. |
| fill? | `string` | — | Fades a fill in behind each path once it finishes drawing. Omit for a stroke-only line drawing. |
| style? | `CSSProperties` | — | |
| className? | `string` | — | |