Dot Grid

import { DotGrid } from '@paper-design/shaders-react';

export default function MyComponent() {
  return (
    <DotGrid
      colorBack="#000000"
      colorFill="#ffffff"
      colorStroke="#ffaa00"
      size={2}
      gapX={32}
      gapY={32}
      strokeWidth={0}
      sizeRange={0}
      opacityRange={0}
      shape="circle"
      style={{ width: '100%', height: '400px' }}
    />
  );
}

import { mountDotGrid } from '@paper-design/shaders';

const canvas = document.getElementById('myCanvas');
const cleanup = mountDotGrid(canvas, {
  colorBack: '#000000',
  colorFill: '#ffffff',
  colorStroke: '#ffaa00',
  size: 2,
  gapX: 32,
  gapY: 32,
  strokeWidth: 0,
  sizeRange: 0,
  opacityRange: 0,
  shape: 'circle',
});

// Call cleanup() when done

import { DotGrid, treeLinePreset } from '@paper-design/shaders-react';

<DotGrid {...treeLinePreset.params} />