Extras

Patterns

Potion provides the ability to fill shapes with patterns using the third-party library react-svg-textures.

Note: not supported on React Native.

Example:

import { Svg } from '@potion/element';
import { Pattern } from '@potion/extra';

<Svg width={400} height={400}>
  <Pattern.Paths
    id='my-pattern'
    d='waves'
    stroke='black'
  />
  <circle cx={100} cy={100} r={5} fill='url(#my-pattern)' />
</Svg>

Gradients

Potion provides the ability to fill shapes with linear and radial gradients. Many preset gradients are provided by uiGradients.

Example:

import { Svg, Circle } from '@potion/element';
import { LinearGradient } from '@potion/extra';

<Svg width={400} height={400}>
   <LinearGradient
    id="my-gradient"
    x1="0%"
    y1="0%"
    x2="0%"
    y2="100%"
    name="argon"
  />
  <Circle cx={100} cy={100} r={5} fill='url(#my-gradient)' />
</Svg>