Extras

Potion Extras are presentational React components that can be used to enrich visualizations visually. Use them to add fill effects and other meta elements to the canvas like axes, legends and gridlines (still in development).

Patterns

Gradients

Patterns

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

Note: not supported on React Native.

Pattern

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.

LinearGradient

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>