# AnimatedPath

Progressively draw an SVG path.

## How to use it

Provide d and a viewBox containing the path. size controls the SVG size; color and strokeWidth control the stroke. Add label when it conveys information; without label it is decorative. Web calculates the length automatically.

It does not perform morphing. React Native requires pathLength with the full path length in SVG units; that property is not part of the web API.

## Import


```tsx
import { AnimatedPath } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
function Example() {
  const [replay, setReplay] = useState(0);
  return <div style={{ display: "grid", gap: 20 }}>
    <AnimatedPath d="M5 12 L10 17 L20 7" label="Completed" size={64} duration={1000} replayKey={replay} />
    <Button type="button" variant="outline" onClick={() => setReplay(replay + 1)}>Replay animation</Button>
  </div>;
}
```


## Decorative path

```tsx
<AnimatedPath d="M2 12 Q12 2 22 12 T42 12" viewBox="0 0 44 24" size={96} duration={1400} />
```


## Without motion

```tsx
<AnimatedPath d="M5 12 L10 17 L20 7" label="Completed" disabled />
```


## API: AnimatedPath


```typescript
declare function AnimatedPath({ d, viewBox, size, color, strokeWidth, label, duration, delay, replayKey, disabled }: AnimatedPathProps): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| d | string | Yes | SVG path commands to draw. |
| color | string | No | See the published type. |
| delay | number | No | Delay before the entrance, in milliseconds. |
| disabled | boolean | No | Disable control interaction or animation motion. |
| duration | number | No | Animation duration in milliseconds. |
| label | string | No | Text or accessible label. |
| replayKey | string \| number | No | Change this value to replay the entrance animation. |
| size | number | No | Visual size of the component. |
| strokeWidth | number | No | See the published type. |
| viewBox | string | No | SVG coordinate system and bounds. |

Source: https://www.kivora.pro/docs/componentes/animated-path