0
# Path Operations
1

2
SVG path parsing, manipulation, and animation with comprehensive cubic Bézier curve support for creating complex animated shapes and paths.
3

4
## Capabilities
5

6
### Path Types
7

8
Core types for representing and manipulating SVG paths.
9

10
```typescript { .api }
11
/**
12
 * Represents a complete SVG path
13
 */
14
interface Path {
15
  /** Starting point of the path */
16
  move: Vector;
17
  /** Array of cubic Bézier curves */
18
  curves: Curve[];
19
  /** Whether the path is closed */
20
  close: boolean;
21
}
22

23
/**
24
 * Represents a cubic Bézier curve segment
25
 */
26
interface Curve {
27
  /** End point of the curve */
28
  to: Vector;
29
  /** First control point */
30
  c1: Vector;
31
  /** Second control point */
32
  c2: Vector;
33
}
34

35
/**
36
 * Extrapolation behavior for animations
37
 */
38
enum Extrapolation {
39
  CLAMP = "clamp",
40
  EXTEND = "extend",
41
  IDENTITY = "identity"
42
}
43
```
44

45
### Path Creation and Manipulation
46

47
```typescript { .api }
48
/**
49
 * Create a new path with starting point
50
 * @param move - Starting point vector
51
 * @returns New empty path
52
 */
53
function createPath(move: Vector): Path;
54

55
/**
56
 * Add a cubic Bézier curve to path
57
 * @param path - Target path to modify
58
 * @param curve - Curve to add
59
 */
60
function addCurve(path: Path, curve: Curve): void;
61

62
/**
63
 * Add a straight line to path
64
 * @param path - Target path to modify
65
 * @param to - End point of line
66
 */
67
function addLine(path: Path, to: Vector): void;
68

69
/**
70
 * Add a quadratic Bézier curve to path
71
 * @param path - Target path to modify
72
 * @param cp - Control point
73
 * @param to - End point
74
 */
75
function addQuadraticCurve(path: Path, cp: Vector, to: Vector): void;
76

77
/**
78
 * Add an arc to path
79
 * @param path - Target path to modify
80
 * @param corner - Arc corner point
81
 * @param to - End point
82
 */
83
function addArc(path: Path, corner: Vector, to: Vector): void;
84

85
/**
86
 * Close the path
87
 * @param path - Path to close
88
 */
89
function close(path: Path): void;
90
```
91

92
**Usage Example:**
93

94
```typescript
95
import { createPath, addLine, addCurve, close, vec2 } from "react-native-redash";
96

97
// Create a complex path
98
const path = createPath(vec2(50, 50));
99

100
// Add a line
101
addLine(path, vec2(100, 50));
102

103
// Add a curved segment
104
addCurve(path, {
105
  c1: vec2(120, 30),
106
  c2: vec2(130, 70),
107
  to: vec2(150, 50)
108
});
109

110
// Close the path
111
close(path);
112
```
113

114
### Path Parsing and Serialization
115

116
```typescript { .api }
117
/**
118
 * Parse SVG path string into Path object
119
 * ⚠️ This function must run on the JS thread (not UI thread)
120
 * @param d - SVG path string
121
 * @returns Parsed Path object
122
 */
123
function parse(d: string): Path;
124

125
/**
126
 * Serialize Path object to SVG path string
127
 * @param path - Path to serialize
128
 * @returns SVG path string
129
 */
130
function serialize(path: Path): string;
131
```
132

133
**Usage Example:**
134

135
```typescript
136
import { parse, serialize } from "react-native-redash";
137

138
// Parse SVG path (on JS thread)
139
const svgPath = "M150,0 C150,0 0,75 200,75 C75,200 200,225 200,225";
140
const path = parse(svgPath);
141

142
// Later serialize back to string (can run on UI thread)
143
const pathString = serialize(path);
144
```
145

146
### Path Animation and Interpolation
147

148
```typescript { .api }
149
/**
150
 * Interpolate between multiple paths
151
 * @param value - Animation value
152
 * @param inputRange - Input range for interpolation
153
 * @param outputRange - Array of paths to interpolate between
154
 * @param extrapolate - Extrapolation behavior (default: CLAMP)
155
 * @returns Interpolated SVG path string
156
 */
157
function interpolatePath(
158
  value: number,
159
  inputRange: number[],
160
  outputRange: Path[],
161
  extrapolate?: Extrapolation
162
): string;
163

164
/**
165
 * Mix between two paths (0 to 1)
166
 * @param value - Mix factor (0 = p1, 1 = p2)
167
 * @param p1 - First path
168
 * @param p2 - Second path
169
 * @param extrapolate - Extrapolation behavior (default: CLAMP)
170
 * @returns Interpolated SVG path string
171
 */
172
function mixPath(
173
  value: number,
174
  p1: Path,
175
  p2: Path,
176
  extrapolate?: Extrapolation
177
): string;
178
```
179

180
**Usage Example:**
181

182
```typescript
183
import React from "react";
184
import Svg, { Path as SvgPath } from "react-native-svg";
185
import { interpolatePath, parse } from "react-native-redash";
186
import Animated, {
187
  useSharedValue,
188
  useDerivedValue,
189
  useAnimatedProps
190
} from "react-native-reanimated";
191

192
const AnimatedSvgPath = Animated.createAnimatedComponent(SvgPath);
193

194
export const MorphingPath = () => {
195
  const progress = useSharedValue(0);
196
  
197
  // Parse paths on JS thread
198
  const path1 = parse("M50,50 L100,50 L75,100 Z");
199
  const path2 = parse("M50,50 C80,30 120,30 150,50 C150,80 120,120 100,150 C80,120 50,80 50,50 Z");
200
  
201
  const animatedProps = useAnimatedProps(() => ({
202
    d: interpolatePath(
203
      progress.value,
204
      [0, 1],
205
      [path1, path2]
206
    )
207
  }));
208
  
209
  return (
210
    <Svg width="200" height="200">
211
      <AnimatedSvgPath
212
        animatedProps={animatedProps}
213
        fill="blue"
214
      />
215
    </Svg>
216
  );
217
};
218
```
219

220
### Path Analysis
221

222
```typescript { .api }
223
/**
224
 * Get curve at specific x coordinate
225
 * @param path - Path to analyze
226
 * @param x - X coordinate
227
 * @returns Curve information or null
228
 */
229
function selectCurve(path: Path, x: number): {
230
  from: Vector;
231
  curve: Curve;
232
} | null;
233

234
/**
235
 * Get Y coordinate for X coordinate on path
236
 * @param path - Path to analyze
237
 * @param x - X coordinate
238
 * @param precision - Calculation precision (default: 2)
239
 * @returns Y coordinate or null if not found
240
 */
241
function getYForX(path: Path, x: number, precision?: number): number | null;
242
```
243

244
### Curve Generation
245

246
```typescript { .api }
247
/**
248
 * Create smooth curves through points
249
 * @param points - Array of points to connect
250
 * @param smoothing - Smoothing factor
251
 * @param strategy - Curve generation strategy
252
 * @returns Path with smooth curves
253
 */
254
function curveLines(
255
  points: Vector<number>[],
256
  smoothing: number,
257
  strategy: "complex" | "bezier" | "simple"
258
): Path;
259
```
260

261
**Usage Example:**
262

263
```typescript
264
import { curveLines, serialize, vec2 } from "react-native-redash";
265

266
// Create smooth path through points
267
const points = [
268
  vec2(50, 100),
269
  vec2(100, 50),
270
  vec2(150, 100),
271
  vec2(200, 50),
272
  vec2(250, 100)
273
];
274

275
const smoothPath = curveLines(points, 0.3, "complex");
276
const pathString = serialize(smoothPath);
277

278
// Use with SVG
279
<SvgPath d={pathString} stroke="blue" fill="none" />
280
```
281

282
**Complete Animation Example:**
283

284
```typescript
285
import React, { useEffect } from "react";
286
import Svg, { Path as SvgPath } from "react-native-svg";
287
import {
288
  parse,
289
  interpolatePath,
290
  curveLines,
291
  serialize,
292
  vec2
293
} from "react-native-redash";
294
import Animated, {
295
  useSharedValue,
296
  useAnimatedProps,
297
  withRepeat,
298
  withTiming
299
} from "react-native-reanimated";
300

301
const AnimatedSvgPath = Animated.createAnimatedComponent(SvgPath);
302

303
export const AnimatedPath = () => {
304
  const progress = useSharedValue(0);
305
  
306
  useEffect(() => {
307
    progress.value = withRepeat(
308
      withTiming(1, { duration: 2000 }),
309
      -1,
310
      true
311
    );
312
  }, []);
313
  
314
  // Create multiple paths
315
  const straightPath = parse("M50,150 L250,150");
316
  
317
  const wavePath = curveLines([
318
    vec2(50, 150),
319
    vec2(100, 100),
320
    vec2(150, 200),
321
    vec2(200, 100),
322
    vec2(250, 150)
323
  ], 0.4, "complex");
324
  
325
  const animatedProps = useAnimatedProps(() => ({
326
    d: interpolatePath(
327
      progress.value,
328
      [0, 1],
329
      [straightPath, wavePath]
330
    )
331
  }));
332
  
333
  return (
334
    <Svg width="300" height="300">
335
      <AnimatedSvgPath
336
        animatedProps={animatedProps}
337
        stroke="purple"
338
        strokeWidth="3"
339
        fill="none"
340
      />
341
    </Svg>
342
  );
343
};
344
```