Fun with 2D Fractal SVG/JavaScript Mountains


In the process of updating the design of our www.thebluehut.com to be responsive, I decided I wanted to show, in a subtle way, that we are based in a mountainous region without resorting to the stereotypical mountain panarama photo.

Having never looked at fractal generation in a serious way, I thought it might be interesting to see how easy it would be to generate a 2D range of mountains to overlay on the site. It turns out the algorithm for generating them is quite simple (gameprogrammer.com) but, of course, getting the implementation right takes longer than you think.

The demo below shows how the mountains appear with the parameters set to get what looks something like the local mountainscape. Refresh or resize the page and the mountains are redrawn.

If you want to play around yourself, the code is on github.