SVG viewBox sandBox

Awhile back I wrote an article about SVG viewBox after being confused by it for so long. Just recently I went back and wrote a live updating sandbox app in React that allows you to quickly play around with different viewBox setups and see the result instantly.

Check out the live demo here and see if you can follow how different changes to viewBox and preserveAspectRatio affect the SVG.

The source code is also available on Github.

And of course if you're still thoroughly confused by viewBox after all of the above, definitely take a look at my article Making Sense of SVG viewBox's Madness.