셰이더 아틀라스
EN
▒ 노이즈

보로노이

Voronoi

흩어진 점을 중심으로 셀을 나누고, 중심과 경계의 거리를 색으로 보여 줍니다.

다른 이름: VoronoiVoronoi noisecellular pattern

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React
// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, Voronoi } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Voronoi />
    </Shader>
  )
}
Vue
<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script setup lang="ts">
import { Shader, Voronoi } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Voronoi/>
  </Shader>
</template>
Svelte
<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script>
  import { Shader, Voronoi } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Voronoi />
</Shader>
Solid
// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, Voronoi } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Voronoi />
    </Shader>
  )
}
JavaScript
// WebGPU 를 지원하는 브라우저에서만 그립니다.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

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

속성(props) · Voronoi

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이름값기본값범위·선택지설명(원문)
colorAColor A (Center)#3186cf—Color near each cell's center point
colorBColor B (Edge)#fc02dd—Color at cell boundaries, far from any center point
stopsColors코드에서 지정null—Multi-stop gradient colors (overrides Color A / Color B when set)
colorBorderBorder Color#000000—Color of the cell boundary lines
scaleScale61 – 20 (step 0.5)Number of cells across the canvas
speedSpeed0.50 – 5 (step 0.1)Animation speed — how fast the cell points drift
seedSeed00 – 100 (step 1)Random seed — shifts the cell pattern without changing the overall structure
edgeIntensityEdge Intensity0.50 – 1 (step 0.01)Controls how much of the cell interior is filled by the edge color. Low = center color dominates with a sharp boundary. High = edge color spreads further into the cell.
edgeSoftnessEdge Softness0.050 – 0.4 (step 0.005)Width of the cell boundary lines.
colorSpaceColor Spacelinearlinear · oklch · oklab · hsl · hsv · lchColor space for color interpolation

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

워리 노이즈Worley Noise

흩어진 점까지의 거리를 색으로 보여 주는 세포형 무늬입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

그리드Grid

일정한 간격의 선이 교차해 칸을 나누는 격자입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

육각 격자Hex Grid

벌집처럼 육각형 칸이 이어지는 격자입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

삼각 격자Triangular Grid

정삼각형이 빈틈없이 이어지고, 행을 옆으로 움직일 수도 있는 격자입니다.

깨진 유리나 세포 조직처럼 점을 중심으로 다각형 셀이 나뉘고, 셀 안팎의 색 차이가 드러납니다. `WorleyNoise`와 같은 셀 계열이지만 경계선 색과 폭을 조절할 수 있습니다.

`scale`은 기본값 6, 범위 1–20이며 높이면 셀 수가 늘어납니다. `edgeIntensity`는 기본값 0.5, 범위 0–1로 높일수록 경계 색이 셀 안쪽까지 더 넓게 퍼집니다. `edgeSoftness`는 기본값 0.05, 범위 0–0.4이며 높이면 경계선 폭이 넓어집니다. `speed`는 기본값 0.5, 범위 0–5로 셀 중심점의 이동 속도를 바꿉니다.

입력에 씌우는 필터가 아니라 세포형 패턴을 직접 그리는 생성 레이어입니다. 경계선 색은 `colorBorder`로 정하고, 셀 면을 더 또렷하게 보이려면 `edgeIntensity`를 낮추세요. 조각이 많아 글자와 경쟁하면 `scale`이나 `speed`를 낮춰 시선을 정리할 수 있습니다.

언제 쓰나

세포·깨진 유리 같은 셀 패턴, 셀 경계가 강조된 배경, 움직이는 다각형 무늬에 좋습니다. 경계 없이 부드럽게 섞이는 얼룩이 필요할 때는 피하세요.

페이지로 열기 ↗