Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 12:55:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Peng Xiao
2023-11-14 19:52:51 +08:00
committed by LongYinan
parent 8d55e5cdf9
commit 9ac8a32e00
3 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/frontend/component/src/components/workspace/index.css.ts
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)`,
},
},
});