I’ve been writing some math-visualisations using plain Javascript,HTML,CSS. I am working on the Fibonacci binary word fractal (see working example). In order to be able to see the ever growing image, I calculate the boundaries of the lines drawn and then adjust the image.

The image is drawn using a <Polyline> in an SVG-element using black stroke and stroke-width of 1 pixel. Up till iteration 15 the image fits pretty normal on the SVG-element of 1500×900 pixels. See the image below

When increasing the iterations the lines do not fit and the script will set a viewBox so that the image will fit. This means that the image is zoomed out. However, also the colors are fading. See the image below:

Anyone got a solution or is this a property of zooming out in an SVG?

The other solution is to recalculate the whole image using shorter line lengths, but this will require some serious refactoring…