CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-svg

SVG library for React Native applications with comprehensive element support and cross-platform compatibility

—

Pending
Overview
Eval results
Files

gradients-patterns.mddocs/

Gradients and Patterns

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

Capabilities

LinearGradient

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

/**
 * Linear gradient definition for fills and strokes
 * @param x1 - X coordinate of gradient start point (default: 0%)
 * @param y1 - Y coordinate of gradient start point (default: 0%)
 * @param x2 - X coordinate of gradient end point (default: 100%)
 * @param y2 - Y coordinate of gradient end point (default: 0%)
 * @param gradientUnits - Coordinate system for gradient ('userSpaceOnUse' | 'objectBoundingBox')
 */
interface LinearGradientProps extends CommonPathProps {
  x1?: NumberProp;
  y1?: NumberProp;
  x2?: NumberProp;
  y2?: NumberProp;
  gradientUnits?: Units;
}

declare const LinearGradient: React.ComponentType<LinearGradientProps>;

Usage Examples:

import Svg, { Defs, LinearGradient, Stop, Rect, Circle } from "react-native-svg";

// Horizontal gradient
<Svg width="200" height="100">
  <Defs>
    <LinearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <Stop offset="0%" stopColor="red" />
      <Stop offset="100%" stopColor="blue" />
    </LinearGradient>
  </Defs>
  <Rect x="10" y="10" width="180" height="80" fill="url(#grad1)" />
</Svg>

// Vertical gradient
<Svg width="200" height="100">
  <Defs>
    <LinearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <Stop offset="0%" stopColor="yellow" />
      <Stop offset="50%" stopColor="orange" />
      <Stop offset="100%" stopColor="red" />
    </LinearGradient>
  </Defs>
  <Circle cx="100" cy="50" r="40" fill="url(#grad2)" />
</Svg>

// Diagonal gradient
<Svg width="200" height="200">
  <Defs>
    <LinearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%">
      <Stop offset="0%" stopColor="purple" />
      <Stop offset="100%" stopColor="pink" />
    </LinearGradient>
  </Defs>
  <Rect x="50" y="50" width="100" height="100" fill="url(#grad3)" />
</Svg>

RadialGradient

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

/**
 * Radial gradient definition for fills and strokes
 * @param cx - X coordinate of gradient center (default: 50%)
 * @param cy - Y coordinate of gradient center (default: 50%)
 * @param fx - X coordinate of gradient focal point (default: cx)
 * @param fy - Y coordinate of gradient focal point (default: cy)
 * @param r - Radius of gradient circle (default: 50%)
 * @param gradientUnits - Coordinate system for gradient ('userSpaceOnUse' | 'objectBoundingBox')
 */
interface RadialGradientProps extends CommonPathProps {
  cx?: NumberProp;
  cy?: NumberProp;
  fx?: NumberProp;
  fy?: NumberProp;
  r?: NumberProp;
  gradientUnits?: Units;
}

declare const RadialGradient: React.ComponentType<RadialGradientProps>;

Usage Examples:

import Svg, { Defs, RadialGradient, Stop, Circle, Ellipse } from "react-native-svg";

// Basic radial gradient
<Svg width="200" height="200">
  <Defs>
    <RadialGradient id="radial1" cx="50%" cy="50%" r="50%">
      <Stop offset="0%" stopColor="white" />
      <Stop offset="100%" stopColor="blue" />
    </RadialGradient>
  </Defs>
  <Circle cx="100" cy="100" r="80" fill="url(#radial1)" />
</Svg>

// Off-center focal point
<Svg width="200" height="200">
  <Defs>
    <RadialGradient id="radial2" cx="50%" cy="50%" fx="30%" fy="30%" r="60%">
      <Stop offset="0%" stopColor="yellow" />
      <Stop offset="50%" stopColor="orange" />
      <Stop offset="100%" stopColor="red" />
    </RadialGradient>
  </Defs>
  <Circle cx="100" cy="100" r="80" fill="url(#radial2)" />
</Svg>

// Spotlight effect
<Svg width="300" height="200">
  <Defs>
    <RadialGradient id="spotlight" cx="70%" cy="30%" r="40%">
      <Stop offset="0%" stopColor="white" stopOpacity="1" />
      <Stop offset="50%" stopColor="lightgray" stopOpacity="0.5" />
      <Stop offset="100%" stopColor="black" stopOpacity="0" />
    </RadialGradient>
  </Defs>
  <Rect width="300" height="200" fill="darkblue" />
  <Rect width="300" height="200" fill="url(#spotlight)" />
</Svg>

Stop

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

/**
 * Color stop definition for gradients
 * @param offset - Position along gradient (0% to 100% or 0.0 to 1.0)
 * @param stopColor - Color at this stop position
 * @param stopOpacity - Opacity at this stop position
 */
interface StopProps {
  offset?: NumberProp;
  stopColor?: ColorValue;
  stopOpacity?: NumberProp;
}

declare const Stop: React.ComponentType<StopProps>;

Usage Examples:

// Multiple color stops with varying opacity
<LinearGradient id="multiStop" x1="0%" y1="0%" x2="100%" y2="0%">
  <Stop offset="0%" stopColor="red" stopOpacity="1" />
  <Stop offset="25%" stopColor="orange" stopOpacity="0.8" />
  <Stop offset="50%" stopColor="yellow" stopOpacity="0.6" />
  <Stop offset="75%" stopColor="green" stopOpacity="0.8" />
  <Stop offset="100%" stopColor="blue" stopOpacity="1" />
</LinearGradient>

// Sharp color transitions
<LinearGradient id="sharp" x1="0%" y1="0%" x2="100%" y2="0%">
  <Stop offset="0%" stopColor="black" />
  <Stop offset="49%" stopColor="black" />
  <Stop offset="51%" stopColor="white" />
  <Stop offset="100%" stopColor="white" />
</LinearGradient>

Pattern

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

/**
 * Repeating pattern definition
 * @param x - X coordinate of pattern start
 * @param y - Y coordinate of pattern start
 * @param width - Width of pattern tile
 * @param height - Height of pattern tile
 * @param patternUnits - Coordinate system for pattern dimensions
 * @param patternContentUnits - Coordinate system for pattern content
 * @param patternTransform - Transform applied to pattern
 * @param viewBox - Viewport for pattern content
 * @param preserveAspectRatio - How to scale pattern content
 */
interface PatternProps extends CommonPathProps {
  x?: NumberProp;
  y?: NumberProp;
  width?: NumberProp;
  height?: NumberProp;
  patternUnits?: Units;
  patternContentUnits?: Units;
  patternTransform?: string;
  viewBox?: string;
  preserveAspectRatio?: string;
}

declare const Pattern: React.ComponentType<PatternProps>;

Usage Examples:

import Svg, { Defs, Pattern, Circle, Rect, Line } from "react-native-svg";

// Polka dot pattern
<Svg width="300" height="200">
  <Defs>
    <Pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <Circle cx="10" cy="10" r="5" fill="red" />
    </Pattern>
  </Defs>
  <Rect width="300" height="200" fill="url(#dots)" />
</Svg>

// Stripe pattern
<Svg width="300" height="200">
  <Defs>
    <Pattern id="stripes" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
      <Rect width="5" height="10" fill="blue" />
      <Rect x="5" width="5" height="10" fill="white" />
    </Pattern>
  </Defs>
  <Circle cx="150" cy="100" r="80" fill="url(#stripes)" />
</Svg>

// Cross-hatch pattern
<Svg width="300" height="200">
  <Defs>
    <Pattern id="crosshatch" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <Line x1="0" y1="10" x2="20" y2="10" stroke="black" strokeWidth="1" />
      <Line x1="10" y1="0" x2="10" y2="20" stroke="black" strokeWidth="1" />
    </Pattern>
  </Defs>
  <Rect x="50" y="50" width="200" height="100" fill="url(#crosshatch)" />
</Svg>

Advanced Gradient Techniques

Gradient Transformations

// Rotated gradient
<LinearGradient
  id="rotated"
  x1="0%"
  y1="0%"
  x2="100%"
  y2="0%"
  gradientTransform="rotate(45 50 50)"
>
  <Stop offset="0%" stopColor="green" />
  <Stop offset="100%" stopColor="yellow" />
</LinearGradient>

// Scaled gradient
<RadialGradient
  id="scaled"
  cx="50%"
  cy="50%"
  r="50%"
  gradientTransform="scale(1.5)"
>
  <Stop offset="0%" stopColor="purple" />
  <Stop offset="100%" stopColor="pink" />
</RadialGradient>

Gradient Animation

// Animated gradient stops (with animation libraries)
<LinearGradient id="animated" x1="0%" y1="0%" x2="100%" y2="0%">
  <Stop offset="0%" stopColor="red">
    <Animate attributeName="stop-color" values="red;blue;red" dur="3s" repeatCount="indefinite" />
  </Stop>
  <Stop offset="100%" stopColor="blue">
    <Animate attributeName="stop-color" values="blue;red;blue" dur="3s" repeatCount="indefinite" />
  </Stop>
</LinearGradient>

Complex Patterns

// Nested pattern elements
<Pattern id="complex" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
  <Rect width="40" height="40" fill="lightblue" />
  <Circle cx="20" cy="20" r="15" fill="none" stroke="blue" strokeWidth="2" />
  <Rect x="15" y="15" width="10" height="10" fill="darkblue" />
</Pattern>

// Pattern with gradients
<Pattern id="gradientPattern" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
  <Defs>
    <RadialGradient id="patternGrad">
      <Stop offset="0%" stopColor="white" />
      <Stop offset="100%" stopColor="gray" />
    </RadialGradient>
  </Defs>
  <Circle cx="15" cy="15" r="12" fill="url(#patternGrad)" />
</Pattern>

Coordinate Systems

// ObjectBoundingBox (relative to element, 0-1 range)
<LinearGradient id="relative" gradientUnits="objectBoundingBox">
  <Stop offset="0" stopColor="red" />
  <Stop offset="1" stopColor="blue" />
</LinearGradient>

// UserSpaceOnUse (absolute coordinates)
<LinearGradient id="absolute" x1="0" y1="0" x2="100" y2="0" gradientUnits="userSpaceOnUse">
  <Stop offset="0%" stopColor="green" />
  <Stop offset="100%" stopColor="yellow" />
</LinearGradient>

Install with Tessl CLI

npx tessl i tessl/npm-react-native-svg

docs

basic-shapes.md

clipping-masking.md

container-elements.md

filter-effects.md

gradients-patterns.md

index.md

paths-complex-shapes.md

text-elements.md

xml-processing.md

tile.json