Poster Generator for Igor Shtang's “Pereverstka”

The layout is built on a grid of 15 square modules: 5×3.

Images

• There are always a large piece of the picture and many smaller ones.
• There are 3 different arrows on the background.
• A circle for the date is also chosen from 10 pre-prepared ones.

Text

• All text blocks are adjacent, except for the date.
• One title line is aligned left, another — right.
• Small text is editable.
• Font lettering for each header line is chosen randomly out of 3 grotesque and 3 antiqua.

Implementation

The whole thing is an html page, no canvas used. All blocks are div elements aligned with CSS grid. I used its ability to pack rects automatically to fill the space with minimal amount of gaps.

To save the resulting image I use html2canvas library.