Pattern

作者:AatreyuShau0 点赞MIT

实时预览

源代码

export default function Component() {
  return (
    <div className="island"></div>
<div className="islandt"></div>
<div className="hatch"></div>

<svg height="0" width="0">
  <filter id="octave1">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0004"
      numOctaves="8"
      seed="4"
      result="o1"
    ></feTurbulence>
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0008"
      numOctaves="8"
      seed="4"
      result="o2"
    ></feTurbulence>
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0001"
      numOctaves="8"
      seed="4"
      result="o3"
    ></feTurbulence>
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0018"
      numOctaves="8"
      seed="4"
      result="o4"
    ></feTurbulence>

    <feMerge result="finalIsland">
      <feMergeNode in="o1"></feMergeNode>
      <feMergeNode in="o3"></feMergeNode>
      <feMergeNode in="o1"></feMergeNode>
      <feMergeNode in="o3"></feMergeNode>
    </feMerge>

    <feGaussianBlur
      in="finalIsland"
      stdDeviation="5"
      result="noiseo"
    ></feGaussianBlur>

    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0008"
      numOctaves="8"
      seed="4"
      result="o1"
    ></feTurbulence>
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0016"
      numOctaves="8"
      seed="4"
      result="o2"
    ></feTurbulence>

    <feMerge result="noiseo">
      <feMergeNode in="o2"></feMergeNode>
      <feMergeNode in="o4"></feMergeNode>
      <feMergeNode in="noiseo"></feMergeNode>
    </feMerge>

    <feGaussianBlur
      in="noiseo"
      stdDeviation="5"
      result="noiseo"
    ></feGaussianBlur>

    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0016"
      numOctaves="8"
      seed="4"
      result="o1"
    ></feTurbulence>
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.002"
      numOctaves="8"
      seed="4"
      result="o2"
    ></feTurbulence>

    <feMerge result="noiseo">
      <feMergeNode in="o1"></feMergeNode>
      <feMergeNode in="o1"></feMergeNode>
      <feMergeNode in="noiseo"></feMergeNode>
    </feMerge>

    <feGaussianBlur
      in="noiseo"
      stdDeviation="5"
      result="noiseo"
    ></feGaussianBlur>

    <feDiffuseLighting
      in="noiseo"
      surfaceScale="12"
      diffuseConstant="1"
      lighting-color="#d7bb98"
      result="lit"
    >
      <feDistantLight azimuth="90" elevation=""></feDistantLight>
    </feDiffuseLighting>

    <feBlend in="lit" in2="SourceGraphic" mode="normal"></feBlend>
  </filter>

  <filter id="octave2">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0004"
      numOctaves="8"
      seed="4"
      result="o1"
    ></feTurbulence>
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0008"
      numOctaves="8"
      seed="4"
      result="o2"
    ></feTurbulence>
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0001"
      numOctaves="8"
      seed="4"
      result="o3"
    ></feTurbulence>
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0018"
      numOctaves="8"
      seed="4"
      result="o4"
    ></feTurbulence>

    <feMerge result="finalIsland">
      <feMergeNode in="o1"></feMergeNode>
      <feMergeNode in="o3"></feMergeNode>
      <feMergeNode in="o1"></feMergeNode>
      <feMergeNode in="o3"></feMergeNode>
    </feMerge>

    <feGaussianBlur
      in="finalIsland"
      stdDeviation="5"
      result="noiseo"
    ></feGaussianBlur>

    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0008"
      numOctaves="8"
      seed="4"
      result="o1"
    ></feTurbulence>
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0016"
      numOctaves="8"
      seed="4"
      result="o2"
    ></feTurbulence>

    <feMerge result="noiseo">
      <feMergeNode in="o2"></feMergeNode>
      <feMergeNode in="o4"></feMergeNode>
      <feMergeNode in="noiseo"></feMergeNode>
    </feMerge>

    <feGaussianBlur
      in="noiseo"
      stdDeviation="5"
      result="noiseo"
    ></feGaussianBlur>

    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.0016"
      numOctaves="8"
      seed="4"
      result="o1"
    ></feTurbulence>
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.002"
      numOctaves="8"
      seed="4"
      result="o2"
    ></feTurbulence>

    <feMerge result="noiseo">
      <feMergeNode in="o1"></feMergeNode>
      <feMergeNode in="o1"></feMergeNode>
      <feMergeNode in="noiseo"></feMergeNode>
    </feMerge>

    <feGaussianBlur
      in="noiseo"
      stdDeviation="5"
      result="noiseo"
    ></feGaussianBlur>

    <feDiffuseLighting
      in="noiseo"
      surfaceScale="12"
      diffuseConstant="1"
      lighting-color="#d1bf96"
      result="lit"
    >
      <feDistantLight azimuth="-90" elevation=""></feDistantLight>
    </feDiffuseLighting>

    <feBlend in="lit" in2="SourceGraphic" mode="normal"></feBlend>
  </filter>
</svg>
  );
}