0
# Gradients and Patterns
1

2
Advanced fill and stroke effects using linear gradients, radial gradients, and repeating patterns.
3

4
## Capabilities
5

6
### LinearGradient
7

8
Creates smooth color transitions along a straight line between two or more colors.
9

10
```typescript { .api }
11
/**
12
 * Linear gradient definition for fills and strokes
13
 * @param x1 - X coordinate of gradient start point (default: 0%)
14
 * @param y1 - Y coordinate of gradient start point (default: 0%)
15
 * @param x2 - X coordinate of gradient end point (default: 100%)
16
 * @param y2 - Y coordinate of gradient end point (default: 0%)
17
 * @param gradientUnits - Coordinate system for gradient ('userSpaceOnUse' | 'objectBoundingBox')
18
 */
19
interface LinearGradientProps extends CommonPathProps {
20
  x1?: NumberProp;
21
  y1?: NumberProp;
22
  x2?: NumberProp;
23
  y2?: NumberProp;
24
  gradientUnits?: Units;
25
}
26

27
declare const LinearGradient: React.ComponentType<LinearGradientProps>;
28
```
29

30
**Usage Examples:**
31

32
```typescript
33
import Svg, { Defs, LinearGradient, Stop, Rect, Circle } from "react-native-svg";
34

35
// Horizontal gradient
36
<Svg width="200" height="100">
37
  <Defs>
38
    <LinearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
39
      <Stop offset="0%" stopColor="red" />
40
      <Stop offset="100%" stopColor="blue" />
41
    </LinearGradient>
42
  </Defs>
43
  <Rect x="10" y="10" width="180" height="80" fill="url(#grad1)" />
44
</Svg>
45

46
// Vertical gradient
47
<Svg width="200" height="100">
48
  <Defs>
49
    <LinearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
50
      <Stop offset="0%" stopColor="yellow" />
51
      <Stop offset="50%" stopColor="orange" />
52
      <Stop offset="100%" stopColor="red" />
53
    </LinearGradient>
54
  </Defs>
55
  <Circle cx="100" cy="50" r="40" fill="url(#grad2)" />
56
</Svg>
57

58
// Diagonal gradient
59
<Svg width="200" height="200">
60
  <Defs>
61
    <LinearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%">
62
      <Stop offset="0%" stopColor="purple" />
63
      <Stop offset="100%" stopColor="pink" />
64
    </LinearGradient>
65
  </Defs>
66
  <Rect x="50" y="50" width="100" height="100" fill="url(#grad3)" />
67
</Svg>
68
```
69

70
### RadialGradient
71

72
Creates circular or elliptical color transitions radiating from a center point.
73

74
```typescript { .api }
75
/**
76
 * Radial gradient definition for fills and strokes
77
 * @param cx - X coordinate of gradient center (default: 50%)
78
 * @param cy - Y coordinate of gradient center (default: 50%)
79
 * @param fx - X coordinate of gradient focal point (default: cx)
80
 * @param fy - Y coordinate of gradient focal point (default: cy)
81
 * @param r - Radius of gradient circle (default: 50%)
82
 * @param gradientUnits - Coordinate system for gradient ('userSpaceOnUse' | 'objectBoundingBox')
83
 */
84
interface RadialGradientProps extends CommonPathProps {
85
  cx?: NumberProp;
86
  cy?: NumberProp;
87
  fx?: NumberProp;
88
  fy?: NumberProp;
89
  r?: NumberProp;
90
  gradientUnits?: Units;
91
}
92

93
declare const RadialGradient: React.ComponentType<RadialGradientProps>;
94
```
95

96
**Usage Examples:**
97

98
```typescript
99
import Svg, { Defs, RadialGradient, Stop, Circle, Ellipse } from "react-native-svg";
100

101
// Basic radial gradient
102
<Svg width="200" height="200">
103
  <Defs>
104
    <RadialGradient id="radial1" cx="50%" cy="50%" r="50%">
105
      <Stop offset="0%" stopColor="white" />
106
      <Stop offset="100%" stopColor="blue" />
107
    </RadialGradient>
108
  </Defs>
109
  <Circle cx="100" cy="100" r="80" fill="url(#radial1)" />
110
</Svg>
111

112
// Off-center focal point
113
<Svg width="200" height="200">
114
  <Defs>
115
    <RadialGradient id="radial2" cx="50%" cy="50%" fx="30%" fy="30%" r="60%">
116
      <Stop offset="0%" stopColor="yellow" />
117
      <Stop offset="50%" stopColor="orange" />
118
      <Stop offset="100%" stopColor="red" />
119
    </RadialGradient>
120
  </Defs>
121
  <Circle cx="100" cy="100" r="80" fill="url(#radial2)" />
122
</Svg>
123

124
// Spotlight effect
125
<Svg width="300" height="200">
126
  <Defs>
127
    <RadialGradient id="spotlight" cx="70%" cy="30%" r="40%">
128
      <Stop offset="0%" stopColor="white" stopOpacity="1" />
129
      <Stop offset="50%" stopColor="lightgray" stopOpacity="0.5" />
130
      <Stop offset="100%" stopColor="black" stopOpacity="0" />
131
    </RadialGradient>
132
  </Defs>
133
  <Rect width="300" height="200" fill="darkblue" />
134
  <Rect width="300" height="200" fill="url(#spotlight)" />
135
</Svg>
136
```
137

138
### Stop
139

140
Defines color stops within gradients, specifying colors and their positions along the gradient.
141

142
```typescript { .api }
143
/**
144
 * Color stop definition for gradients
145
 * @param offset - Position along gradient (0% to 100% or 0.0 to 1.0)
146
 * @param stopColor - Color at this stop position
147
 * @param stopOpacity - Opacity at this stop position
148
 */
149
interface StopProps {
150
  offset?: NumberProp;
151
  stopColor?: ColorValue;
152
  stopOpacity?: NumberProp;
153
}
154

155
declare const Stop: React.ComponentType<StopProps>;
156
```
157

158
**Usage Examples:**
159

160
```typescript
161
// Multiple color stops with varying opacity
162
<LinearGradient id="multiStop" x1="0%" y1="0%" x2="100%" y2="0%">
163
  <Stop offset="0%" stopColor="red" stopOpacity="1" />
164
  <Stop offset="25%" stopColor="orange" stopOpacity="0.8" />
165
  <Stop offset="50%" stopColor="yellow" stopOpacity="0.6" />
166
  <Stop offset="75%" stopColor="green" stopOpacity="0.8" />
167
  <Stop offset="100%" stopColor="blue" stopOpacity="1" />
168
</LinearGradient>
169

170
// Sharp color transitions
171
<LinearGradient id="sharp" x1="0%" y1="0%" x2="100%" y2="0%">
172
  <Stop offset="0%" stopColor="black" />
173
  <Stop offset="49%" stopColor="black" />
174
  <Stop offset="51%" stopColor="white" />
175
  <Stop offset="100%" stopColor="white" />
176
</LinearGradient>
177
```
178

179
### Pattern
180

181
Creates repeating graphical patterns that can be used as fills or strokes.
182

183
```typescript { .api }
184
/**
185
 * Repeating pattern definition
186
 * @param x - X coordinate of pattern start
187
 * @param y - Y coordinate of pattern start
188
 * @param width - Width of pattern tile
189
 * @param height - Height of pattern tile
190
 * @param patternUnits - Coordinate system for pattern dimensions
191
 * @param patternContentUnits - Coordinate system for pattern content
192
 * @param patternTransform - Transform applied to pattern
193
 * @param viewBox - Viewport for pattern content
194
 * @param preserveAspectRatio - How to scale pattern content
195
 */
196
interface PatternProps extends CommonPathProps {
197
  x?: NumberProp;
198
  y?: NumberProp;
199
  width?: NumberProp;
200
  height?: NumberProp;
201
  patternUnits?: Units;
202
  patternContentUnits?: Units;
203
  patternTransform?: string;
204
  viewBox?: string;
205
  preserveAspectRatio?: string;
206
}
207

208
declare const Pattern: React.ComponentType<PatternProps>;
209
```
210

211
**Usage Examples:**
212

213
```typescript
214
import Svg, { Defs, Pattern, Circle, Rect, Line } from "react-native-svg";
215

216
// Polka dot pattern
217
<Svg width="300" height="200">
218
  <Defs>
219
    <Pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
220
      <Circle cx="10" cy="10" r="5" fill="red" />
221
    </Pattern>
222
  </Defs>
223
  <Rect width="300" height="200" fill="url(#dots)" />
224
</Svg>
225

226
// Stripe pattern
227
<Svg width="300" height="200">
228
  <Defs>
229
    <Pattern id="stripes" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
230
      <Rect width="5" height="10" fill="blue" />
231
      <Rect x="5" width="5" height="10" fill="white" />
232
    </Pattern>
233
  </Defs>
234
  <Circle cx="150" cy="100" r="80" fill="url(#stripes)" />
235
</Svg>
236

237
// Cross-hatch pattern
238
<Svg width="300" height="200">
239
  <Defs>
240
    <Pattern id="crosshatch" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
241
      <Line x1="0" y1="10" x2="20" y2="10" stroke="black" strokeWidth="1" />
242
      <Line x1="10" y1="0" x2="10" y2="20" stroke="black" strokeWidth="1" />
243
    </Pattern>
244
  </Defs>
245
  <Rect x="50" y="50" width="200" height="100" fill="url(#crosshatch)" />
246
</Svg>
247
```
248

249
## Advanced Gradient Techniques
250

251
### Gradient Transformations
252

253
```typescript
254
// Rotated gradient
255
<LinearGradient
256
  id="rotated"
257
  x1="0%"
258
  y1="0%"
259
  x2="100%"
260
  y2="0%"
261
  gradientTransform="rotate(45 50 50)"
262
>
263
  <Stop offset="0%" stopColor="green" />
264
  <Stop offset="100%" stopColor="yellow" />
265
</LinearGradient>
266

267
// Scaled gradient
268
<RadialGradient
269
  id="scaled"
270
  cx="50%"
271
  cy="50%"
272
  r="50%"
273
  gradientTransform="scale(1.5)"
274
>
275
  <Stop offset="0%" stopColor="purple" />
276
  <Stop offset="100%" stopColor="pink" />
277
</RadialGradient>
278
```
279

280
### Gradient Animation
281

282
```typescript
283
// Animated gradient stops (with animation libraries)
284
<LinearGradient id="animated" x1="0%" y1="0%" x2="100%" y2="0%">
285
  <Stop offset="0%" stopColor="red">
286
    <Animate attributeName="stop-color" values="red;blue;red" dur="3s" repeatCount="indefinite" />
287
  </Stop>
288
  <Stop offset="100%" stopColor="blue">
289
    <Animate attributeName="stop-color" values="blue;red;blue" dur="3s" repeatCount="indefinite" />
290
  </Stop>
291
</LinearGradient>
292
```
293

294
### Complex Patterns
295

296
```typescript
297
// Nested pattern elements
298
<Pattern id="complex" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
299
  <Rect width="40" height="40" fill="lightblue" />
300
  <Circle cx="20" cy="20" r="15" fill="none" stroke="blue" strokeWidth="2" />
301
  <Rect x="15" y="15" width="10" height="10" fill="darkblue" />
302
</Pattern>
303

304
// Pattern with gradients
305
<Pattern id="gradientPattern" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
306
  <Defs>
307
    <RadialGradient id="patternGrad">
308
      <Stop offset="0%" stopColor="white" />
309
      <Stop offset="100%" stopColor="gray" />
310
    </RadialGradient>
311
  </Defs>
312
  <Circle cx="15" cy="15" r="12" fill="url(#patternGrad)" />
313
</Pattern>
314
```
315

316
## Coordinate Systems
317

318
```typescript
319
// ObjectBoundingBox (relative to element, 0-1 range)
320
<LinearGradient id="relative" gradientUnits="objectBoundingBox">
321
  <Stop offset="0" stopColor="red" />
322
  <Stop offset="1" stopColor="blue" />
323
</LinearGradient>
324

325
// UserSpaceOnUse (absolute coordinates)
326
<LinearGradient id="absolute" x1="0" y1="0" x2="100" y2="0" gradientUnits="userSpaceOnUse">
327
  <Stop offset="0%" stopColor="green" />
328
  <Stop offset="100%" stopColor="yellow" />
329
</LinearGradient>
330
```