Pattern
作者:AatreyuShau♥ 0 点赞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>
);
}