0
# Paths and Complex Shapes
1

2
Advanced shape elements for creating complex geometries using SVG path data, polygons, and polylines.
3

4
## Capabilities
5

6
### Path
7

8
Renders complex shapes using SVG path data commands for precise control over geometry.
9

10
```typescript { .api }
11
/**
12
 * Renders an SVG path element using path data commands
13
 * @param d - SVG path data string (move, line, curve commands)
14
 * @param opacity - Opacity of the path
15
 */
16
interface PathProps extends CommonPathProps {
17
  d?: string;
18
  opacity?: NumberProp;
19
}
20

21
declare const Path: React.ComponentType<PathProps>;
22
```
23

24
**Usage Examples:**
25

26
```typescript
27
import Svg, { Path } from "react-native-svg";
28

29
// Simple path - triangle
30
<Svg height="100" width="100">
31
  <Path
32
    d="M 10 80 L 50 20 L 90 80 Z"
33
    fill="none"
34
    stroke="red"
35
    strokeWidth="2"
36
  />
37
</Svg>
38

39
// Complex curved path
40
<Svg height="100" width="100">
41
  <Path
42
    d="M 10 50 Q 50 10 90 50 Q 50 90 10 50"
43
    fill="lightblue"
44
    stroke="blue"
45
    strokeWidth="1"
46
  />
47
</Svg>
48

49
// Heart shape
50
<Svg height="100" width="100">
51
  <Path
52
    d="M 50 85 C 20 60, 20 40, 40 30 C 45 25, 55 25, 60 30 C 80 40, 80 60, 50 85 Z"
53
    fill="red"
54
  />
55
</Svg>
56
```
57

58
**Path Data Commands:**
59
- `M x y` - Move to point
60
- `L x y` - Line to point  
61
- `C x1 y1 x2 y2 x y` - Cubic Bezier curve
62
- `Q x1 y1 x y` - Quadratic Bezier curve
63
- `A rx ry rotation large-arc sweep x y` - Arc
64
- `Z` - Close path
65

66
### Polygon
67

68
Renders a closed shape with straight sides defined by a series of points.
69

70
```typescript { .api }
71
/**
72
 * Renders an SVG polygon element
73
 * @param points - String of coordinate pairs defining the polygon vertices
74
 * @param opacity - Opacity of the polygon
75
 */
76
interface PolygonProps extends CommonPathProps {
77
  points?: string;
78
  opacity?: NumberProp;
79
}
80

81
declare const Polygon: React.ComponentType<PolygonProps>;
82
```
83

84
**Usage Examples:**
85

86
```typescript
87
import Svg, { Polygon } from "react-native-svg";
88

89
// Triangle
90
<Svg height="100" width="100">
91
  <Polygon
92
    points="50,10 90,90 10,90"
93
    fill="green"
94
    stroke="darkgreen"
95
    strokeWidth="2"
96
  />
97
</Svg>
98

99
// Pentagon
100
<Svg height="100" width="100">
101
  <Polygon
102
    points="50,5 85,30 75,75 25,75 15,30"
103
    fill="yellow"
104
    stroke="orange"
105
    strokeWidth="2"
106
  />
107
</Svg>
108

109
// Star shape
110
<Svg height="100" width="100">
111
  <Polygon
112
    points="50,5 60,35 95,35 70,55 80,85 50,65 20,85 30,55 5,35 40,35"
113
    fill="gold"
114
    stroke="orange"
115
    strokeWidth="1"
116
  />
117
</Svg>
118
```
119

120
### Polyline
121

122
Renders an open shape with straight line segments connecting a series of points.
123

124
```typescript { .api }
125
/**
126
 * Renders an SVG polyline element
127
 * @param points - String of coordinate pairs defining the line segments
128
 * @param opacity - Opacity of the polyline
129
 */
130
interface PolylineProps extends CommonPathProps {
131
  points?: string;
132
  opacity?: NumberProp;
133
}
134

135
declare const Polyline: React.ComponentType<PolylineProps>;
136
```
137

138
**Usage Examples:**
139

140
```typescript
141
import Svg, { Polyline } from "react-native-svg";
142

143
// Simple zigzag line
144
<Svg height="100" width="100">
145
  <Polyline
146
    points="10,40 30,20 50,40 70,20 90,40"
147
    fill="none"
148
    stroke="blue"
149
    strokeWidth="3"
150
  />
151
</Svg>
152

153
// Mountain silhouette
154
<Svg height="100" width="200">
155
  <Polyline
156
    points="0,80 20,60 40,70 60,40 80,50 100,30 120,45 140,25 160,35 180,20 200,30"
157
    fill="none"
158
    stroke="darkgreen"
159
    strokeWidth="2"
160
  />
161
</Svg>
162

163
// Data visualization line chart
164
<Svg height="100" width="200">
165
  <Polyline
166
    points="10,80 30,60 50,40 70,45 90,30 110,50 130,25 150,35 170,20 190,40"
167
    fill="none"
168
    stroke="purple"
169
    strokeWidth="2"
170
    strokeDasharray="3,3"
171
  />
172
</Svg>
173
```
174

175
## Advanced Path Techniques
176

177
### Combining Multiple Path Commands
178

179
```typescript
180
// Complex shape with multiple commands
181
<Path
182
  d="M 20 20 L 80 20 L 80 40 Q 80 50 70 50 L 30 50 Q 20 50 20 40 Z"
183
  fill="lightcoral"
184
  stroke="darkred"
185
  strokeWidth="2"
186
/>
187
```
188

189
### Relative vs Absolute Commands
190

191
```typescript
192
// Absolute commands (uppercase)
193
<Path d="M 10 10 L 50 10 L 50 50 Z" />
194

195
// Relative commands (lowercase) 
196
<Path d="M 10 10 l 40 0 l 0 40 z" />
197
```
198

199
### Smooth Curves
200

201
```typescript
202
// Smooth cubic Bezier curves
203
<Path
204
  d="M 10 50 C 30 10, 70 10, 90 50 S 130 90, 150 50"
205
  fill="none"
206
  stroke="blue"
207
  strokeWidth="2"
208
/>
209

210
// Smooth quadratic Bezier curves  
211
<Path
212
  d="M 10 50 Q 50 10, 90 50 T 150 50"
213
  fill="none"
214
  stroke="red"
215
  strokeWidth="2"
216
/>
217
```
218

219
## Point Format
220

221
For Polygon and Polyline components, points are specified as a string of coordinate pairs:
222

223
```typescript
224
// Format: "x1,y1 x2,y2 x3,y3 ..."
225
points="10,20 30,40 50,10"
226

227
// Spaces and commas are interchangeable
228
points="10 20 30 40 50 10"
229
points="10,20,30,40,50,10"
230
```