# @remotion/paths

SVG path utilities for animations — line drawing, path morphing, measurements.

**Package:** `@remotion/paths`

## Installation

```bash
npm i @remotion/paths
```

## evolvePath() — Line Drawing Animation

Animates an SVG path from invisible to fully drawn.

```tsx
import { evolvePath } from '@remotion/paths';
import { useCurrentFrame } from 'remotion';
import { interpolate } from 'remotion';

const LineDrawing = () => {
  const frame = useCurrentFrame();
  const path = "M 10 10 L 100 10 L 100 100 L 10 100 Z";
  
  // Progress from 0 (invisible) to 1 (fully drawn)
  const progress = interpolate(frame, [0, 60], [0, 1], {
    extrapolateRight: 'clamp',
  });
  
  const evolution = evolvePath(progress, path);
  
  return (
    <svg width={200} height={200}>
      <path
        d={path}
        stroke="white"
        strokeWidth={3}
        fill="none"
        strokeDasharray={evolution.strokeDasharray}
        strokeDashoffset={evolution.strokeDashoffset}
      />
    </svg>
  );
};
```

### Parameters

- `progress`: 0 = invisible, 1 = fully drawn
  - Values > 1: start of path begins to disappear
  - Values < 0: path evolves from the end
- `path`: Valid SVG path string

### Returns

```tsx
{
  strokeDasharray: string;  // Apply to path element
  strokeDashoffset: number; // Apply to path element
}
```

## Other Path Functions

### getLength()
```tsx
import { getLength } from '@remotion/paths';

const length = getLength("M 0 0 L 100 100"); // 141.42...
```

### getPointAtLength()
```tsx
import { getPointAtLength } from '@remotion/paths';

const point = getPointAtLength("M 0 0 L 100 100", 50);
// { x: 35.35..., y: 35.35... }
```

### getTangentAtLength()
```tsx
import { getTangentAtLength } from '@remotion/paths';

const tangent = getTangentAtLength("M 0 0 L 100 100", 50);
// { x: 0.707..., y: 0.707... }
```

### reversePath()
```tsx
import { reversePath } from '@remotion/paths';

const reversed = reversePath("M 0 0 L 100 100");
// Draws from end to start
```

### interpolatePath()
```tsx
import { interpolatePath } from '@remotion/paths';

const morphed = interpolatePath(0.5, pathA, pathB);
// Morphs between two paths
```

### scalePath()
```tsx
import { scalePath } from '@remotion/paths';

const scaled = scalePath("M 0 0 L 100 100", 2, 2);
// Doubles the size
```

### translatePath()
```tsx
import { translatePath } from '@remotion/paths';

const moved = translatePath("M 0 0 L 100 100", 50, 50);
// Shifts by (50, 50)
```

### getBoundingBox()
```tsx
import { getBoundingBox } from '@remotion/paths';

const box = getBoundingBox("M 0 0 L 100 100");
// { x1: 0, y1: 0, x2: 100, y2: 100 }
```

## Use Cases

- **Logo reveals**: Draw logo paths progressively
- **Handwriting effect**: Evolve text paths
- **Path morphing**: Smooth transitions between shapes
- **Following a path**: Get position/angle along a curve for animating objects

## See Also

- [Remotion docs](https://www.remotion.dev/docs/paths)
