Dot Grid

Installation

npm i @paper-design/shaders-react

Code

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

<DotGrid
  style={{ height: 500 }}
  colorBack="hsl(0, 0%, 0%)"
  colorFill="hsl(0, 0%, 100%)"
  colorStroke="hsl(40, 100%, 50%)"
  size={2}
  gapX={32}
  gapY={32}
  strokeWidth={0}
  sizeRange={0}
  opacityRange={0}
  shape="circle"
  scale={1}
  rotation={0}
/>

Props

colorBack, colorFill, colorStroke

Colors used for the effect.

size

Base shape size.

gapX, gapY

Pattern spacing.

strokeWidth

The stroke (to be added to size).

sizeRange

Randomizes the size of shape between 0 and size.

opacityRange

Variety of shape opacity.

shape

The shape of the dots (circle, diamond, square, triangle).

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

Description

Static grid pattern.