Marble

Classic marble swirl and vein texture using noise-warped sine waves

Props

colorAstring

Default:#ffffff

Base background color of the marble

colorA

stringDefault: #ffffff

Base background color of the marble

colorBstring

Default:#3a2d54

Secondary marble tone

colorB

stringDefault: #3a2d54

Secondary marble tone

colorCstring

Default:#0f0f0f

Deepest marble color

colorC

stringDefault: #0f0f0f

Deepest marble color

scalenumber

Default:2

Scale and density of the marble vein pattern

scale

numberDefault: 2

Scale and density of the marble vein pattern

turbulencenumber

Default:10

Amount of noise-driven distortion applied to the veins

turbulence

numberDefault: 10

Amount of noise-driven distortion applied to the veins

speednumber

Default:0.05

Animation speed

speed

numberDefault: 0.05

Animation speed

seednumber

Default:0

Random seed for pattern variation

seed

numberDefault: 0

Random seed for pattern variation

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

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

Usage

<Shader>
  <Marble />
</Shader>

<Shader>
  <Marble />
</Shader>

<Shader>
  <Marble />
</Shader>

<Shader>
  <Marble />
</Shader>

import { createShader } from 'shaders/js'

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

Liquify

Mirror

Documentation

Marble

Props

Usage