HexGrid

Honeycomb hexagonal grid pattern

Props

colorAstring

Default:#000000

Cell fill color

colorA

stringDefault: #000000

Cell fill color

colorBstring

Default:#ffffff

Grid line color

colorB

stringDefault: #ffffff

Grid line color

cellsnumber

Default:8

Number of hexagons across the shortest canvas edge

cells

numberDefault: 8

Number of hexagons across the shortest canvas edge

thicknessnumber

Default:1

Thickness of the hex grid lines

thickness

numberDefault: 1

Thickness of the hex grid lines

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

<Shader>
  <HexGrid />
</Shader>

<Shader>
  <HexGrid />
</Shader>

<Shader>
  <HexGrid />
</Shader>

<Shader>
  <HexGrid />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'HexGrid', props: {} }
  ]
})