Noise

SVG feTurbulence 필터로 노이즈 텍스처를 생성한다. baseFrequency와 octave를 조절해 다양한 유기적 패턴을 탐구한다.

fractalNoise · 0.065×0.065 · 4 oct

parameters

base frequency x0.065

base frequency y0.065

num octaves4

typefractalNoise

blend modeoverlay

color tintnone

live svg

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="noise">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.065 0.065"
      numOctaves="4"
      stitchTiles="stitch"
    />
    <feColorMatrix type="saturate" values="0"/>
  </filter>
  <rect
    width="100%" height="100%"
    filter="url(#noise)"
    style="mix-blend-mode: overlay"
  />
</svg>

이 실험에 대해

feTurbulence는 Perlin noise 알고리즘을 기반으로 난수 텍스처를 생성하는 SVG 필터 프리미티브다. baseFrequency는 패턴의 세밀도, numOctaves는 디테일 레이어 수를 결정한다. fractalNoise는 부드럽고 turbulence는 더 격렬한 패턴을 만든다.

핵심 코드

<filter id="noise">
  /* type: fractalNoise | turbulence */
  /* baseFrequency: 낮을수록 거친 패턴, 높을수록 세밀한 패턴 */
  /* numOctaves: 높을수록 디테일이 풍부해지지만 느려짐 */
  <feTurbulence
    type="fractalNoise"
    baseFrequency="0.065 0.065"
    numOctaves="4"
    stitchTiles="stitch"
  />
  <feColorMatrix type="saturate" values="0"/>
</filter>

/* mix-blend-mode로 아래 레이어와 블렌딩 */
<rect filter="url(#noise)" style="mix-blend-mode: overlay"/>