Randomized Bookshelf Rectangles

Hidde de Vries’s Data-informed flex-grow for illustration purposes is a walkthrough of some of the techniques he used to build his bookshelf backgrounds.

Screenshot of Hidde's bookshelf page, showing four books sitting on top of some randomized rectangles behind them looking like a bookshelf in the distance. All of it over a dark blue background.

There didn’t seem to be an isolated demo so I made one for myself:

Forgive me the sin of using React. Just seemed like a quick way to make a loop to produce elements and apply randomized property values at the same time.


I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen Pro

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️