perf(component): use png instead of svg for rendering noise svg (#4935)

This commit is contained in:
Peng Xiao 2023-11-14 19:52:51 +08:00 committed by LongYinan
parent 8d55e5cdf9
commit 9ac8a32e00
No known key found for this signature in database
GPG Key ID: C3666B7FC82ADAD7
3 changed files with 10 additions and 3 deletions

View File

@ -3,6 +3,7 @@ import type { ComplexStyleRule } from '@vanilla-extract/css';
import { globalStyle, style } from '@vanilla-extract/css';
import { breakpoints } from '../../styles/mui-theme';
export const appStyle = style({
width: '100%',
position: 'relative',
@ -22,9 +23,11 @@ export const appStyle = style({
content: '""',
position: 'absolute',
inset: 0,
opacity: 'var(--affine-noise-opacity)',
backgroundSize: '25%',
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
opacity: 'var(--affine-noise-opacity, 0)',
backgroundRepeat: 'repeat',
backgroundSize: '2.5%',
// todo: figure out how to use vanilla-extract webpack plugin to inject img url
backgroundImage: `var(--noise-background)`,
},
},
});

View File

@ -8,6 +8,10 @@
/*transition: all 0.1s;*/
}
:root {
--noise-background: url(./noise.png);
}
html,
body,
h1,

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB