DotGrid

Grid of dots with optional twinkling animation

Props

colorstring

Default:#ffffff

The color of the dot

color

stringDefault: #ffffff

The color of the dot

densitynumber

Default:30

The number of dots on the longest canvas edge

density

numberDefault: 30

The number of dots on the longest canvas edge

dotSizenumber

Default:0.3

The size of each dot, zero (0) being invisible, one (1) filled the grid with no gaps

dotSize

numberDefault: 0.3

The size of each dot, zero (0) being invisible, one (1) filled the grid with no gaps

twinklenumber

Default:0

Intensity of the twinkle effect (0 = off, 1 = full twinkle)

twinkle

numberDefault: 0

Intensity of the twinkle effect (0 = off, 1 = full twinkle)

Usage

<Shader>
  <DotGrid
    color="#ffffff"
  />
</Shader>

<Shader>
  <DotGrid
    color="#ffffff"
  />
</Shader>

<Shader>
  <DotGrid
    color="#ffffff"
  />
</Shader>

<Shader>
  <DotGrid
    color="#ffffff"
  />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'DotGrid', props: { color: '#ffffff' } }
  ]
})

Dither

DropShadow

Documentation

DotGrid

Props

Usage