AnimatedPath
Progressively draw an SVG path.
Text and Markdown example
1function Example() {
2 const [replay, setReplay] = useState(0);
3 return <div style={{ display: "grid", gap: 20 }}>
4 <AnimatedPath d="M5 12 L10 17 L20 7" label="Completed" size={64} duration={1000} replayKey={replay} />
5 <Button type="button" variant="outline" onClick={() => setReplay(replay + 1)}>Replay animation</Button>
6 </div>;
7}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
1import { AnimatedPath } from "@kivora/nextjs";Interactive examples run inside a component with "use client". The playground's Copy button includes the imports needed for the current example.
API reference 0.3.0
Types from the installed published version, including component properties and common HTML attributes. “Optional” does not imply a default value; omitting a property lets the component decide.
| Property | Type | Description |
|---|---|---|
dRequired | string | SVG path commands to draw. |
color | string | Configures color. The type describes the supported values and structure. |
delay | number | Delay before the entrance, in milliseconds. |
disabled | boolean | Disable control interaction or animation motion. |
duration | number | Animation duration in milliseconds. |
label | string | Text or accessible label. |
replayKey | string | number | Change this value to replay the entrance animation. |
size | number | Visual size of the component. |
strokeWidth | number | Configures strokeWidth. The type describes the supported values and structure. |
viewBox | string | SVG coordinate system and bounds. |
TypeScript definition
Review each component's properties and published declaration. Native and accessibility attributes are inherited from the element specified by its type.
AnimatedPath10 properties
1declare function AnimatedPath({ d, viewBox, size, color, strokeWidth, label, duration, delay, replayKey, disabled }: AnimatedPathProps): React.JSX.Element;