BrickPattern

Classic brick wall pattern with alternating rows and mortar gaps

Props

colorBrickstring

Default:#000000

Brick color

colorBrick

stringDefault: #000000

Brick color

colorMortarstring

Default:#ffffff

Mortar / gap color

colorMortar

stringDefault: #ffffff

Mortar / gap color

cellsXnumber

Default:8

Number of bricks per row

cellsX

numberDefault: 8

Number of bricks per row

cellsYnumber

Default:10

Number of brick rows

cellsY

numberDefault: 10

Number of brick rows

mortarnumber

Default:0.05

Width of mortar gaps — equal pixel thickness in both directions

mortar

numberDefault: 0.05

Width of mortar gaps — equal pixel thickness in both directions

anglenumber

Default:0

Rotation angle in degrees

angle

numberDefault: 0

Rotation angle in degrees

speednumber

Default:0

Animation speed

speed

numberDefault: 0

Animation speed

offsetnumber

Default:0

Static horizontal offset — shifts the brick pattern without animating

offset

numberDefault: 0

Static horizontal offset — shifts the brick pattern without animating

speedVariancenumber

Default:0

How much each row's speed varies — at high values rows move at different speeds and directions

speedVariance

numberDefault: 0

How much each row's speed varies — at high values rows move at different speeds and directions

seednumber

Default:0

Random seed for per-row speed variation

seed

numberDefault: 0

Random seed for per-row speed variation

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

Default:linear

Color space for interpolation

colorSpace

Color space for interpolation

Usage

<Shader>
  <BrickPattern />
</Shader>

<Shader>
  <BrickPattern />
</Shader>

<Shader>
  <BrickPattern />
</Shader>

<Shader>
  <BrickPattern />
</Shader>

import { createShader } from 'shaders/js'

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

Blur

BrightnessContrast

Documentation

BrickPattern

Props

Usage