xevion/grain
1
0
Fork 0
mirror of https://github.com/Xevion/grain.git synced 2025-12-06 01:15:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add memoization to useBackground

Browse Source
This commit is contained in:
Xevion
2022-11-25 00:16:38 -06:00
parent df4193e94c
commit e6d30c291b
1 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/useBackground.tsx
View File

@@ -47,27 +47,29 @@ const useBackground = ({
setBackground(generateBackground()); setBackground(generateBackground());
}; };
const svgWidth = Math.ceil((width ?? 1920) * ratio); const noise = useMemo(() => {
const svgHeight = Math.ceil((height ?? 1080) * ratio); const svgWidth = Math.ceil((width ?? 1920) * ratio);
const noise = ( const svgHeight = Math.ceil((height ?? 1080) * ratio);
<svg return (
viewBox={`0 0 ${svgWidth} ${svgHeight}`} <svg
xmlns="http://www.w3.org/2000/svg" viewBox={`0 0 ${svgWidth} ${svgHeight}`}
> xmlns="http://www.w3.org/2000/svg"
<filter id="noiseFilter"> >
<feTurbulence <filter id="noiseFilter">
type="fractalNoise" <feTurbulence
baseFrequency="2.1" type="fractalNoise"
numOctaves="2" baseFrequency="2.1"
seed={chance.natural()} numOctaves="2"
stitchTiles="stitch" seed={chance.natural()}
/> stitchTiles="stitch"
</filter> />
<g opacity={0.9}> </filter>
<rect width="100%" height="100%" filter="url(#noiseFilter)" /> <g opacity={0.9}>
</g> <rect width="100%" height="100%" filter="url(#noiseFilter)" />
</svg> </g>
); </svg>
);
}, [width, height, ratio]);
return { return {
regenerate, regenerate,