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

offsetnumber

Default:0

Horizontal stagger of alternating rows (0.5 = classic polka-dot brick offset)

offset

numberDefault: 0

Horizontal stagger of alternating rows (0.5 = classic polka-dot brick offset)

speednumber

Default:0

Animates the rows drifting horizontally (0 = static)

speed

numberDefault: 0

Animates the rows drifting horizontally (0 = static)

speedVariancenumber

Default:0.3

Per-row random speed variance for irregular drifting motion

speedVariance

numberDefault: 0.3

Per-row random speed variance for irregular drifting motion

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