@potion/extra

Extras

Extra elements/effects used when visualizing data like gradients, patterns, axes and legends to name a few.

Patterns

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

Example:

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

<Svg width={400} height={400}>
  <Pattern.Lines
    id='my-pattern'
    strokeWidth={10}
    stroke='purple'
    size={10}
    orientation='diagonal'
    background='blue'
  />
  <circle cx={100} cy={100} r={5} fill='url(#my-pattern)' />
</Svg>

Gradients