Discover the beauty of an ever-evolving Chinese landscape art. This project combines the elegance of procedural generation with the power of vector graphics to create a mesmerizing, infinite-scrolling journey.
You can move the canvas with the left and right arrow keys or by using the buttons. In the menu section, you can find an option to download the whole or part of your art as an SVG or to share it with your friends.
React, TypeScript and SVG. Nothing more! ✨
Check it in online or locally:
npm install
npm run start
Check it in online or generate it locally with TypeDoc from Shan_Shui project.
npm run docs
This is the third iteration of this app:
-
Firstly created as a monolithic JavaScript file by Lingdong Huang
-
Then it was rebuilt with React 17 by RedContritio without changing the source code
-
I have rebuilt it using React function components, employing an object-oriented programming approach. Additionally, I have addressed several bugs and incorporated various improvements for enhanced performance and readability:
- Dark mode was added,
- Some of the most complex elements were simplified,
- Whole code was rewritten and commented using JSDoc,
- Fastest way to work with array was implemented wherever it was reasonable,
- Invisible objects are removed from the DOM for faster rendering and lower memory consumption,
- Designing and rendering is done via web workers and promises for parallel computation, preventing main thread blockages.
DCL FCP LCP Longest task Old 4.92s 4.92s 6.18s 2.02s New 0.19s 0.25s 0.25s 0.23s Diff ⏬25x ⏬19x ⏬25x ⏬8x