tessl/npm-react-native-svg

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

—

Pending

Overview

Eval results

Files

Filter Effects

Name: tessl/npm-react-native-svg
Author: tessl

Comprehensive filter system for advanced visual effects including blur, color manipulation, lighting, and compositing operations.

Capabilities

Filter

Container element that defines a filter effect chain composed of filter primitives.

/**
 * Filter container for combining multiple filter primitives
 * @param x - X coordinate of filter region
 * @param y - Y coordinate of filter region
 * @param width - Width of filter region
 * @param height - Height of filter region
 * @param filterUnits - Coordinate system for filter dimensions
 * @param primitiveUnits - Coordinate system for filter primitives
 */
interface FilterProps extends CommonPathProps {
  x?: NumberProp;
  y?: NumberProp;
  width?: NumberProp;
  height?: NumberProp;
  filterUnits?: Units;
  primitiveUnits?: Units;
}

declare const Filter: React.ComponentType<FilterProps>;

Usage Examples:

import Svg, { Defs, Filter, FeGaussianBlur, FeOffset, Circle, Rect } from "react-native-svg";

// Basic blur filter
<Svg width="200" height="200">
  <Defs>
    <Filter id="blur">
      <FeGaussianBlur stdDeviation="3" />
    </Filter>
  </Defs>
  <Circle cx="100" cy="100" r="50" fill="blue" filter="url(#blur)" />
</Svg>

// Drop shadow filter
<Svg width="250" height="200">
  <Defs>
    <Filter id="dropshadow" x="-20%" y="-20%" width="140%" height="140%">
      <FeOffset dx="4" dy="4" />
      <FeGaussianBlur stdDeviation="2" />
    </Filter>
  </Defs>
  <Rect x="50" y="50" width="100" height="80" fill="red" filter="url(#dropshadow)" />
</Svg>

Filter Primitives

FeGaussianBlur

Applies Gaussian blur effect to input elements.

/**
 * Gaussian blur filter primitive
 * @param stdDeviation - Standard deviation for blur (single value or "x,y")
 * @param in - Input for this filter primitive
 * @param edgeMode - Edge handling mode
 */
interface FeGaussianBlurProps extends FilterPrimitiveCommonProps {
  stdDeviation?: NumberProp | string;
  in?: string;
  edgeMode?: FilterEdgeMode;
}

declare const FeGaussianBlur: React.ComponentType<FeGaussianBlurProps>;

type FilterEdgeMode = 'duplicate' | 'wrap' | 'none';

Usage Examples:

// Variable blur
<Filter id="variableBlur">
  <FeGaussianBlur stdDeviation="5,2" />
</Filter>

// Blur with edge mode
<Filter id="edgeBlur">
  <FeGaussianBlur stdDeviation="3" edgeMode="duplicate" />
</Filter>

FeOffset

Shifts elements by specified amounts in X and Y directions.

/**
 * Offset filter primitive for shifting elements
 * @param dx - X offset amount
 * @param dy - Y offset amount
 * @param in - Input for this filter primitive
 */
interface FeOffsetProps extends FilterPrimitiveCommonProps {
  dx?: NumberProp;
  dy?: NumberProp;
  in?: string;
}

declare const FeOffset: React.ComponentType<FeOffsetProps>;

FeColorMatrix

Applies color transformations using matrix operations.

/**
 * Color matrix filter primitive for color transformations
 * @param type - Type of color matrix operation
 * @param values - Matrix values or single value (depending on type)
 * @param in - Input for this filter primitive
 */
interface FeColorMatrixProps extends FilterPrimitiveCommonProps {
  type?: FilterColorMatrixType;
  values?: string | NumberProp;
  in?: string;
}

declare const FeColorMatrix: React.ComponentType<FeColorMatrixProps>;

type FilterColorMatrixType = 'matrix' | 'saturate' | 'hueRotate' | 'luminanceToAlpha';

Usage Examples:

// Desaturate (grayscale)
<Filter id="grayscale">
  <FeColorMatrix type="saturate" values="0" />
</Filter>

// Sepia effect
<Filter id="sepia">
  <FeColorMatrix
    type="matrix"
    values="0.393 0.769 0.189 0 0
            0.349 0.686 0.168 0 0
            0.272 0.534 0.131 0 0
            0 0 0 1 0"
  />
</Filter>

// Hue rotation
<Filter id="hueShift">
  <FeColorMatrix type="hueRotate" values="90" />
</Filter>

FeBlend

Blends two inputs using specified blend modes.

/**
 * Blend filter primitive for combining inputs
 * @param mode - Blend mode operation
 * @param in - First input
 * @param in2 - Second input
 */
interface FeBlendProps extends FilterPrimitiveCommonProps {
  mode?: 'normal' | 'multiply' | 'screen' | 'darken' | 'lighten' | 'overlay' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion';
  in?: string;
  in2?: string;
}

declare const FeBlend: React.ComponentType<FeBlendProps>;

FeComposite

Combines two inputs using Porter-Duff compositing operations.

/**
 * Composite filter primitive for advanced combining
 * @param operator - Compositing operation
 * @param k1 - First constant for arithmetic operation
 * @param k2 - Second constant for arithmetic operation
 * @param k3 - Third constant for arithmetic operation
 * @param k4 - Fourth constant for arithmetic operation
 * @param in - First input
 * @param in2 - Second input
 */
interface FeCompositeProps extends FilterPrimitiveCommonProps {
  operator?: 'over' | 'in' | 'out' | 'atop' | 'xor' | 'arithmetic';
  k1?: NumberProp;
  k2?: NumberProp;
  k3?: NumberProp;
  k4?: NumberProp;
  in?: string;
  in2?: string;
}

declare const FeComposite: React.ComponentType<FeCompositeProps>;

FeFlood

Creates a solid color fill that can be used in filter chains.

/**
 * Flood filter primitive for solid color generation
 * @param floodColor - Fill color
 * @param floodOpacity - Fill opacity
 */
interface FeFloodProps extends FilterPrimitiveCommonProps {
  floodColor?: ColorValue;
  floodOpacity?: NumberProp;
}

declare const FeFlood: React.ComponentType<FeFloodProps>;

FeMerge

Merges multiple filter results into a single output.

/**
 * Merge filter primitive for combining multiple inputs
 */
interface FeMergeProps extends FilterPrimitiveCommonProps {}

declare const FeMerge: React.ComponentType<FeMergeProps>;

/**
 * Merge node specifying an input to merge
 * @param in - Input to include in merge
 */
interface FeMergeNodeProps extends FilterPrimitiveCommonProps {
  in?: string;
}

declare const FeMergeNode: React.ComponentType<FeMergeNodeProps>;

Usage Examples:

// Combine multiple effects
<Filter id="combined">
  <FeOffset dx="3" dy="3" result="offset" />
  <FeGaussianBlur stdDeviation="2" result="blur" />
  <FeMerge>
    <FeMergeNode in="blur" />
    <FeMergeNode in="SourceGraphic" />
  </FeMerge>
</Filter>

FeComponentTransfer

Applies component-wise remapping of color values using transfer functions for each color channel.

/**
 * Component transfer filter primitive for per-channel color remapping
 */
interface FeComponentTransferProps extends FilterPrimitiveCommonProps {
  in?: string;
}

declare const FeComponentTransfer: React.ComponentType<FeComponentTransferProps>;

Component Transfer Functions

Individual transfer functions for each color channel (red, green, blue, alpha).

/**
 * Transfer function for individual color channels
 * @param type - Type of transfer function
 * @param tableValues - Lookup table values for 'table' type
 * @param slope - Slope for 'linear' type
 * @param intercept - Intercept for 'linear' type
 * @param amplitude - Amplitude for 'gamma' type
 * @param exponent - Exponent for 'gamma' type
 * @param offset - Offset for 'gamma' type
 */
interface FeFuncProps extends FilterPrimitiveCommonProps {
  type?: 'identity' | 'table' | 'discrete' | 'linear' | 'gamma';
  tableValues?: string;
  slope?: NumberProp;
  intercept?: NumberProp;
  amplitude?: NumberProp;
  exponent?: NumberProp;
  offset?: NumberProp;
}

declare const FeFuncA: React.ComponentType<FeFuncProps>;
declare const FeFuncR: React.ComponentType<FeFuncProps>;
declare const FeFuncG: React.ComponentType<FeFuncProps>;
declare const FeFuncB: React.ComponentType<FeFuncProps>;

FeConvolveMatrix

Applies a convolution matrix for effects like sharpening, blurring, or edge detection.

/**
 * Convolution matrix filter primitive
 * @param order - Size of convolution matrix "x y" or single number
 * @param kernelMatrix - Matrix values as space-separated string
 * @param divisor - Value to divide result by
 * @param bias - Value to add to result
 * @param targetX - X offset of convolution matrix
 * @param targetY - Y offset of convolution matrix
 * @param edgeMode - Edge handling mode
 * @param preserveAlpha - Whether to preserve alpha channel
 */
interface FeConvolveMatrixProps extends FilterPrimitiveCommonProps {
  order?: string | NumberProp;
  kernelMatrix?: string;
  divisor?: NumberProp;
  bias?: NumberProp;
  targetX?: NumberProp;
  targetY?: NumberProp;
  edgeMode?: FilterEdgeMode;
  preserveAlpha?: BooleanProp;
  in?: string;
}

declare const FeConvolveMatrix: React.ComponentType<FeConvolveMatrixProps>;

FeDiffuseLighting

Creates diffuse lighting effects using various light sources.

/**
 * Diffuse lighting filter primitive
 * @param surfaceScale - Surface height scale factor
 * @param diffuseConstant - Diffuse reflection constant
 * @param lightingColor - Color of light source
 */
interface FeDiffuseLightingProps extends FilterPrimitiveCommonProps {
  surfaceScale?: NumberProp;
  diffuseConstant?: NumberProp;
  lightingColor?: ColorValue;
  in?: string;
}

declare const FeDiffuseLighting: React.ComponentType<FeDiffuseLightingProps>;

FeDisplacementMap

Displaces pixels using values from another input as a displacement map.

/**
 * Displacement map filter primitive for pixel displacement
 * @param scale - Displacement scale factor
 * @param xChannelSelector - Color channel for X displacement ('R'|'G'|'B'|'A')
 * @param yChannelSelector - Color channel for Y displacement ('R'|'G'|'B'|'A')
 * @param in - Primary input
 * @param in2 - Displacement map input
 */
interface FeDisplacementMapProps extends FilterPrimitiveCommonProps {
  scale?: NumberProp;
  xChannelSelector?: 'R' | 'G' | 'B' | 'A';
  yChannelSelector?: 'R' | 'G' | 'B' | 'A';
  in?: string;
  in2?: string;
}

declare const FeDisplacementMap: React.ComponentType<FeDisplacementMapProps>;

FeDistantLight

Defines a distant light source for lighting effects (infinite light from a direction).

/**
 * Distant light source for lighting effects
 * @param azimuth - Direction angle in degrees (0-360)
 * @param elevation - Elevation angle in degrees (0-90)
 */
interface FeDistantLightProps extends FilterPrimitiveCommonProps {
  azimuth?: NumberProp;
  elevation?: NumberProp;
}

declare const FeDistantLight: React.ComponentType<FeDistantLightProps>;

FeDropShadow

Creates drop shadow effects (shorthand for common shadow filter chains).

/**
 * Drop shadow filter primitive (shorthand)
 * @param dx - X offset of shadow
 * @param dy - Y offset of shadow
 * @param stdDeviation - Blur amount for shadow
 * @param floodColor - Shadow color
 * @param floodOpacity - Shadow opacity
 */
interface FeDropShadowProps extends FilterPrimitiveCommonProps {
  dx?: NumberProp;
  dy?: NumberProp;
  stdDeviation?: NumberProp;
  floodColor?: ColorValue;
  floodOpacity?: NumberProp;
  in?: string;
}

declare const FeDropShadow: React.ComponentType<FeDropShadowProps>;

FeImage

Incorporates an external image or SVG element into the filter chain.

/**
 * Image filter primitive for incorporating external graphics
 * @param href - Reference to image resource or SVG element
 * @param preserveAspectRatio - How to scale the image
 */
interface FeImageProps extends FilterPrimitiveCommonProps {
  href?: string;
  preserveAspectRatio?: string;
}

declare const FeImage: React.ComponentType<FeImageProps>;

FeMorphology

Applies morphological operations (dilate/erode) for effects like outlining.

/**
 * Morphology filter primitive for dilate/erode operations
 * @param operator - Morphological operation ('dilate' | 'erode')
 * @param radius - Operation radius (single value or "x,y")
 */
interface FeMorphologyProps extends FilterPrimitiveCommonProps {
  operator?: 'dilate' | 'erode';
  radius?: NumberProp | string;
  in?: string;
}

declare const FeMorphology: React.ComponentType<FeMorphologyProps>;

FePointLight

Defines a point light source for lighting effects (light emanating from a point).

/**
 * Point light source for lighting effects
 * @param x - X coordinate of light position
 * @param y - Y coordinate of light position  
 * @param z - Z coordinate of light position
 */
interface FePointLightProps extends FilterPrimitiveCommonProps {
  x?: NumberProp;
  y?: NumberProp;
  z?: NumberProp;
}

declare const FePointLight: React.ComponentType<FePointLightProps>;

FeSpecularLighting

Creates specular lighting effects for shiny surface appearance.

/**
 * Specular lighting filter primitive for shiny effects
 * @param surfaceScale - Surface height scale factor
 * @param specularConstant - Specular reflection constant
 * @param specularExponent - Specular reflection exponent
 * @param lightingColor - Color of light source
 */
interface FeSpecularLightingProps extends FilterPrimitiveCommonProps {
  surfaceScale?: NumberProp;
  specularConstant?: NumberProp;
  specularExponent?: NumberProp;
  lightingColor?: ColorValue;
  in?: string;
}

declare const FeSpecularLighting: React.ComponentType<FeSpecularLightingProps>;

FeSpotLight

Defines a spot light source for lighting effects (cone-shaped light).

/**
 * Spot light source for lighting effects
 * @param x - X coordinate of light position
 * @param y - Y coordinate of light position
 * @param z - Z coordinate of light position
 * @param pointsAtX - X coordinate light points towards
 * @param pointsAtY - Y coordinate light points towards
 * @param pointsAtZ - Z coordinate light points towards
 * @param specularExponent - Focus of spotlight cone
 * @param limitingConeAngle - Maximum cone angle in degrees
 */
interface FeSpotLightProps extends FilterPrimitiveCommonProps {
  x?: NumberProp;
  y?: NumberProp;
  z?: NumberProp;
  pointsAtX?: NumberProp;
  pointsAtY?: NumberProp;
  pointsAtZ?: NumberProp;
  specularExponent?: NumberProp;
  limitingConeAngle?: NumberProp;
}

declare const FeSpotLight: React.ComponentType<FeSpotLightProps>;

FeTile

Repeats input to fill the filter region in a tiled pattern.

/**
 * Tile filter primitive for repeating patterns
 */
interface FeTileProps extends FilterPrimitiveCommonProps {
  in?: string;
}

declare const FeTile: React.ComponentType<FeTileProps>;

FeTurbulence

Generates turbulence noise patterns for texture effects.

/**
 * Turbulence noise generator filter primitive
 * @param baseFrequency - Base frequency for noise (single value or "x,y")
 * @param numOctaves - Number of octaves for fractal noise
 * @param type - Type of noise ('fractalNoise' | 'turbulence')
 * @param stitchTiles - Whether to stitch tiles seamlessly
 * @param seed - Random seed for noise generation
 */
interface FeTurbulenceProps extends FilterPrimitiveCommonProps {
  baseFrequency?: NumberProp | string;
  numOctaves?: NumberProp;
  type?: 'fractalNoise' | 'turbulence';
  stitchTiles?: 'stitch' | 'noStitch';
  seed?: NumberProp;
}

declare const FeTurbulence: React.ComponentType<FeTurbulenceProps>;

Complex Filter Examples

Drop Shadow

<Svg width="300" height="200">
  <Defs>
    <Filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
      {/* Create shadow */}
      <FeOffset dx="4" dy="4" in="SourceAlpha" result="offset" />
      <FeGaussianBlur stdDeviation="3" in="offset" result="blur" />
      <FeFlood floodColor="black" floodOpacity="0.3" result="flood" />
      <FeComposite in="flood" in2="blur" operator="in" result="shadow" />
      
      {/* Combine with original */}
      <FeMerge>
        <FeMergeNode in="shadow" />
        <FeMergeNode in="SourceGraphic" />
      </FeMerge>
    </Filter>
  </Defs>
  
  <Rect x="50" y="50" width="100" height="80" fill="blue" filter="url(#dropShadow)" />
</Svg>

Glow Effect

<Svg width="300" height="200">
  <Defs>
    <Filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      {/* Create glow */}
      <FeGaussianBlur stdDeviation="4" in="SourceAlpha" result="blur" />
      <FeFlood floodColor="cyan" floodOpacity="0.8" result="glowColor" />
      <FeComposite in="glowColor" in2="blur" operator="in" result="glow" />
      
      {/* Combine multiple glows */}
      <FeMerge>
        <FeMergeNode in="glow" />
        <FeMergeNode in="glow" />
        <FeMergeNode in="SourceGraphic" />
      </FeMerge>
    </Filter>
  </Defs>
  
  <Circle cx="150" cy="100" r="40" fill="white" filter="url(#glow)" />
</Svg>

Beveled Edge

<Svg width="300" height="200">
  <Defs>
    <Filter id="bevel" x="-50%" y="-50%" width="200%" height="200%">
      {/* Create highlight */}
      <FeOffset dx="-1" dy="-1" in="SourceAlpha" result="highlight" />
      <FeFlood floodColor="white" floodOpacity="0.8" result="highlightColor" />
      <FeComposite in="highlightColor" in2="highlight" operator="in" result="highlightFinal" />
      
      {/* Create shadow */}
      <FeOffset dx="1" dy="1" in="SourceAlpha" result="shadow" />
      <FeFlood floodColor="black" floodOpacity="0.4" result="shadowColor" />
      <FeComposite in="shadowColor" in2="shadow" operator="in" result="shadowFinal" />
      
      {/* Combine all */}
      <FeMerge>
        <FeMergeNode in="shadowFinal" />
        <FeMergeNode in="SourceGraphic" />
        <FeMergeNode in="highlightFinal" />
      </FeMerge>
    </Filter>
  </Defs>
  
  <Rect x="100" y="60" width="100" height="80" fill="silver" filter="url(#bevel)" />
</Svg>

Filter Primitive Common Properties

/**
 * Common properties for all filter primitives
 * @param x - X coordinate of primitive region
 * @param y - Y coordinate of primitive region
 * @param width - Width of primitive region
 * @param height - Height of primitive region
 * @param result - Name for this primitive's output
 */
interface FilterPrimitiveCommonProps extends CommonPathProps {
  x?: NumberProp;
  y?: NumberProp;
  width?: NumberProp;
  height?: NumberProp;
  result?: string;
}

Filter Input Sources

Common input values for filter primitives:

"SourceGraphic" - Original element
"SourceAlpha" - Alpha channel of original element
"BackgroundImage" - Background behind element
"BackgroundAlpha" - Alpha of background
"FillPaint" - Fill paint of element
"StrokePaint" - Stroke paint of element
Custom result names from previous primitives

Performance Tips

Optimize Filter Regions

// Define explicit filter regions to reduce processing area
<Filter id="optimized" x="0%" y="0%" width="100%" height="100%">
  <FeGaussianBlur stdDeviation="2" />
</Filter>

Reuse Filter Results

// Store intermediate results for reuse
<Filter id="efficient">
  <FeGaussianBlur stdDeviation="3" result="blur" />
  <FeOffset dx="2" dy="2" in="blur" result="offsetBlur" />
  <FeComposite in="blur" in2="offsetBlur" operator="multiply" />
</Filter>

Install with Tessl CLI