lingdong-/shan-shui-inf

★ 5,631HTMLAudience · designerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((shan-shui-inf))
    What it does
      Infinite landscape
      Chinese painting style
      SVG output
    How it works
      Noise functions
      Geometric rules
      Single HTML file
    Use cases
      Generative art
      Creative coding
      Browser demo
    Audience
      Artists
      Creative coders
      Designers

mindmap root((shan-shui-inf)) What it does Infinite landscape Chinese painting style SVG output How it works Noise functions Geometric rules Single HTML file Use cases Generative art Creative coding Browser demo Audience Artists Creative coders Designers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

View an endlessly scrolling, algorithmically generated Chinese landscape painting in your browser.

USE CASE 2

Study the source code to learn how mathematical noise functions can produce art that looks hand-painted.

USE CASE 3

Embed or fork the single-file project to create your own generative art experiments.

Tech stack

JavaScriptHTMLSVG

Getting it running

Difficulty · easy Time to first run · 5min

Runs entirely in the browser with no install needed, just open the demo link.

License information is not clearly stated in the explanation.

In plain English

Shan Shui is a browser-based art project that generates Chinese landscape paintings that scroll infinitely to the side. The name comes from the Chinese words for mountain and water, which are the defining subjects of a traditional style of Chinese painting called shan shui. The project is inspired by historic Chinese landscape scrolls, including famous works like "Dwelling in the Fuchun Mountains." Everything is generated by code rather than drawn by hand. The mountains, trees, and other landscape elements are built from mathematical noise functions and geometric rules, so each scroll is unique and continues forever as you pan across it. The output is in SVG format, which is a vector image format that stays sharp at any size and can be viewed directly in a browser. The project runs entirely in the browser with no server required. You can try it at the live demo link in the README without installing anything. The source code is written in JavaScript and is short enough that it fits in a single HTML page. This is a creative coding and generative art project rather than a utility tool. It demonstrates how mathematical functions can produce visual results that resemble hand-painted artwork. The README is brief and points to the live demo and a few screenshots. No build steps or configuration are needed to run it.

Copy-paste prompts

Prompt 1

I want to create a generative art project like shan-shui-inf that makes infinite scrolling landscapes. Walk me through how to use noise functions in JavaScript to generate mountain shapes as SVG paths.

Prompt 2

Using the shan-shui-inf project as inspiration, how would I modify it to change the color palette from ink-wash to sunset colors?

Prompt 3

Explain how Perlin noise or similar math functions can be used to generate natural-looking terrain shapes in SVG using JavaScript.

Prompt 4

I want to add animated weather effects like falling snow or fog to a shan-shui-inf style canvas. How would I approach this in JavaScript SVG?

Open on GitHub → Explain another repo

← lingdong- on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.