Shader Atlas
한국어
▒ Noise

Worley Noise

워리 노이즈

A cellular field that maps distance from scattered points to color, with selectable cell and edge patterns.

Also known as: WorleyNoisecellular noisecell noise

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, WorleyNoise } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <WorleyNoise />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, WorleyNoise } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <WorleyNoise/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, WorleyNoise } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <WorleyNoise />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, WorleyNoise } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <WorleyNoise />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'WorleyNoise',
    }
  ]
}, { disableTelemetry: true })

Props · WorleyNoise

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
colorAColor A (Low)#ffffff—Color where the noise field is low (typically near cell centers)
colorBColor B (High)#000000—Color where the noise field is high (typically near cell boundaries)
colorSpaceColor Spacelinearlinear · oklch · oklab · hsl · hsv · lchColor space for color interpolation
scaleScale61 – 30 (step 0.5)Number of cells across the canvas at the base octave
modeModef1f1 · f2 · f2MinusF1 · f1PlusF2 · f1TimesF2Field type. F1 = distance to nearest point. F2 = distance to second-nearest. F2 − F1 emphasises cell boundaries.
distanceDistanceeuclideaneuclidean · manhattan · chebyshevDistance metric. Euclidean = round cells. Manhattan = diamond. Chebyshev = square.
octavesOctaves11 – 4 (step 1)Number of fractal layers stacked at progressively finer scales
lacunarityLacunarity21.5 – 4 (step 0.1)Scale multiplier between octaves (only active when Octaves > 1)
persistencePersistence0.50 – 1 (step 0.01)Amplitude multiplier between octaves (only active when Octaves > 1)
jitterJitter10 – 1 (step 0.01)How much each cell's point drifts inside its cell. 0 = rigid grid (banded look), 1 = fully random.
contrastContrast10.25 – 4 (step 0.01)Steepness of the gradient between low and high regions
balanceBalance0-1 – 1 (step 0.01)Shifts the gradient midpoint. Negative pulls the field toward Color A, positive toward Color B.
seedSeed00 – 100 (step 1)Random seed — shifts the cell pattern without changing its overall structure
speedSpeed0.50 – 5 (step 0.1)Animation speed — how fast each cell's point drifts

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Voronoi보로노이

A cellular pattern that colors each pixel by its distance from scattered points, with adjustable cell edges.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Block Noise블록 노이즈

Blocky value noise with soft cells that morph over time.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Erosion Noise침식 노이즈

Branching ridges that look carved into a noise field by flowing water.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Fractal Noise프랙털 노이즈

A layered noise texture whose pattern evolves over time, with finer detail added at successive scales.

Its connected cell borders resemble soap bubbles or fractured stone. The shape of each cell stays more visible than in noise made of smoothly blended patches.

`scale` defaults to 6 and ranges from 1 to 30; higher values fit more cells across the canvas. `mode` defaults to `f1`, the distance to the nearest point; `f2MinusF1` emphasizes cell borders. `distance` defaults to `euclidean`; `manhattan` makes diamond-like cells and `chebyshev` makes square ones. `jitter` defaults to 1 and ranges from 0 to 1: values near 0 keep points in a rigid layout, while values near 1 scatter them more freely inside each cell. `speed` defaults to 0.5 and ranges from 0 to 5; it controls how fast the cell points move.

This generator draws directly on the canvas and needs no input layer. Lower `speed` when you want the cell layout to hold still, and reduce color contrast when dense borders start to crowd the scene. Compare it with `Voronoi` for another view of cell boundaries.

When to use

Use it for cell, foam, or fractured-stone textures, cellular backgrounds, and abstract patterns with visible borders. Avoid it when you want nearly borderless cloudlike color blending.

Open as page ↗