IsometricCubes

Isometric tumbling-blocks tiling — a 3D cube illusion (rhombille pattern)

Props

colorAstring

Default:#7c5cff

Base cube color

colorA

stringDefault: #7c5cff

Base cube color

colorBstring

Default:#ff5c9d

Second cube color, mixed in per-cube for variation

colorB

stringDefault: #ff5c9d

Second cube color, mixed in per-cube for variation

lineColorstring

Default:#000000

Color of the cube edge lines

lineColor

stringDefault: #000000

Color of the cube edge lines

cellsnumber

Default:6

Number of cubes across the shortest canvas edge

cells

numberDefault: 6

Number of cubes across the shortest canvas edge

thicknessnumber

Default:1

Thickness of the cube edge lines (0 = no edges)

thickness

numberDefault: 1

Thickness of the cube edge lines (0 = no edges)

rotationnumber

Default:0

Rotation of the tiling in degrees

rotation

numberDefault: 0

Rotation of the tiling in degrees

softnessnumber

Default:0

Softness of the edge lines (0 = crisp, 1 = very soft)

softness

numberDefault: 0

Softness of the edge lines (0 = crisp, 1 = very soft)

colorVariationnumber

Default:1

Per-cube random blend between the two colors (0 = uniform cubes, the clean 3D look)

colorVariation

numberDefault: 1

Per-cube random blend between the two colors (0 = uniform cubes, the clean 3D look)

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

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

Usage

<Shader>
  <IsometricCubes />
</Shader>

<Shader>
  <IsometricCubes />
</Shader>

<Shader>
  <IsometricCubes />
</Shader>

<Shader>
  <IsometricCubes />
</Shader>

import { createShader } from 'shaders/js'

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

Invert

Kaleidoscope