SVG에 의한 펄린 노이즈

SVG의 필터 기능을 사용하여 펄린 노이즈를 생성할 수 있습니다.

다음 페이지를 참고로 했습니다.

svg 요소의 기본 사용법 요약

SVG 파일

SVG 필터를 사용한 펄린 노이즈 생성의 예

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="feTurbulence" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
      <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="5" seed="3" stitchTiles="stitch"></feTurbulence>
      <feColorMatrix type="saturate" values="0"></feColorMatrix>
    </filter>
  </defs>
  <rect filter="url(#feTurbulence)" x="0" y="0" width="200" height="200"></rect>
</svg>

이 중의 필터 설정 부분을 보기 쉽게 한 것이 아래의 것입니다.

필터 설정

<feTurbulence
        type="fractalNoise"
        baseFrequency="0.05"
        numOctaves="5"
        seed="3"
        stitchTiles="stitch">
</feTurbulence>
<feColorMatrix
        type="saturate"
        values="0">
</feColorMatrix>

<filter> 의 <feTurbulence> 에 의해 펄린 노이즈를 생성할 수 있습니다. 이 필터만으로는 각 색요소에 대해 노이즈가 생성되므로 그 뒤에 feColorMatrix<feTurbulence> 만의 필터의 경우, 다음과 같은 이미지가 됩니다.



이것에 그레이 스케일의 필터를 걸어, 이하와 같이 완성하고 있습니다.


<feTurbulence> 의 type 에는 "turbulence" 와 "fractalNoise" 의 2종류 중에서 선택할 수 있으며, 각각에서 특징이 다릅니다.
baseFrequency 에서는 주기를 설정할 수 있어 세밀함에 영향을 줍니다.
numOctaves 에서는 프랙탈 계층의 깊이를 설정합니다.
stitchTiles 는, "stitch" 의 지정으로 이음새를 연결하는 설정으로 할 수 있습니다만, 자신의 환경이라면 그렇게 생성되지 않았습니다.