@visx/glyph

Circle Glyph

This feature allows you to render a circle glyph at a specified position with a given size and color. The example demonstrates how to create a blue circle glyph centered at (250, 250) with a size of 100.

import { GlyphCircle } from '@visx/glyph';

const CircleGlyphExample = () => (
  <svg width={500} height={500}>
    <GlyphCircle left={250} top={250} size={100} fill="blue" />
  </svg>
);

Line Glyph

This feature allows you to render line glyphs, which are essentially dots that can be connected to form lines. The example demonstrates how to create three dots at different positions with different colors.

import { GlyphDot } from '@visx/glyph';

const LineGlyphExample = () => (
  <svg width={500} height={500}>
    <GlyphDot left={100} top={100} size={50} fill="red" />
    <GlyphDot left={200} top={200} size={50} fill="green" />
    <GlyphDot left={300} top={300} size={50} fill="blue" />
  </svg>
);

Custom SVG Path Glyph

This feature allows you to render custom SVG path glyphs. The example demonstrates how to create a custom path glyph with a specified SVG path string.

import { Glyph } from '@visx/glyph';

const CustomPathGlyphExample = () => (
  <svg width={500} height={500}>
    <Glyph top={250} left={250} size={100} fill="purple">
      {({ path }) => (
        <path d={path('M10 10 H 90 V 90 H 10 Z')} />
      )}
    </Glyph>
  </svg>
);