refactor: Inline and simplify glowing backdrop SVG pattern #6536
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
damianstasik
changed the title
|
Just something strange the design had change. it's can from you svg manipulation. Try to keep SVG as it |
|
it's can solve #6520 |
Probably yes, yea. |
MattIPv4
reviewed
Mar 25, 2024
|
Note we have already an component |
|
Hey @damianstasik any updates to the PR? |
|
@AugustinMauroy do you mind taking over this PR? |
github-actions
bot
removed
the
github_actions:pull-request
|
Lighthouse Results
|
Unit Test Coverage Report
Unit Test Report
|
ovflowd
approved these changes
Apr 24, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
The SVG pattern used for the glowing backdrop is quite big, fortunately thanks to compression instead of transferring 50kb only around 6kb is sent through the wire. There is still issue of the additional request just to show a pattern which blinks on page load no matter how fast your Internet connection might be. This PR is an experiment to simplify the SVG and inline it into a React component so that we do not make unnecessary requests.
To simplify the SVG I've tried to run it through SVGO, but there is a lot of separate/unmergable paths and a bit of unnecessary complexity so the outcome was not as good as it could be. I've decided to remake the it in Figma from scratch, make it pixel-perfect, controllable with local vars to make further adjustments much easier, then I flattened the paths and exported the result.
Old SVG – pre-optimized: 48.28kb, optimized: 11.38k (1.18kb gzipped)
New SVG – pre-optimized: 6.81k, optimized: 4.89k (673b gzipped)
I still have a few ideas how to bring that down even more, but I'll need a bit more time if there's an interest, if no feel free to close this PR.
Validation
Related Issues
Check List
npx turbo formatto ensure the code follows the style guide.npx turbo testto check if all tests are passing.npx turbo buildto check if the website builds without errors.