Geometry, Color, and the Art of Unequal Division

Piet Mondrian (1872-1944) reduced painting to its purest geometric elements: straight lines, right angles, and blocks of color. His compositions, which he called neoplasticism, use horizontal and vertical black lines to create grids of unequal rectangles filled with red, blue, yellow, or white. The apparent simplicity conceals deep intentionality. Every proportion, every color placement is a deliberate act of visual balance. His 1930 masterwork Composition with Red, Blue, and Yellow remains one of the most recognizable images in art history.

This tool takes the structural principle and introduces randomness. The division lines are placed at random positions. The cell sizes emerge from those positions. The colors are assigned from a randomly generated palette. Each composition is a unique interpretation of the neoplastic idea: geometry and color in dynamic tension, never repeating.

Random Partitions

The grid is created by generating 3 random vertical positions and 3 random horizontal positions, then sorting them. The gaps between consecutive positions become cell widths and heights. A minimum size constraint prevents degenerate sliver cells. The result is a partition where some cells are large and dominant while others are compact and tight. This asymmetry is what creates visual interest: the eye moves between spaces of different scale, finding rhythm in irregularity.

Generative Color Harmony

Each composition generates a fresh palette: 3 to 5 vibrant colors evenly distributed around the color wheel, plus white and near-black. Cells receive colors randomly with a distribution inspired by Mondrian: approximately 45% white (creating breathing space), 45% vibrant (creating energy), and 10% dark (creating anchoring weight). The random palette ensures every composition has its own chromatic identity, from warm sunset harmonies to cool oceanic schemes.

Layout Inspiration for Designers

CSS Grid makes asymmetric layouts trivially achievable in modern web design, yet designers often default to equal columns. This tool generates compositions that break the equal-division habit. Use it as a starting point for page layouts, dashboard arrangements, photo gallery grids, or poster designs. The proportions produced by random division are surprisingly pleasing because they avoid the monotony of regularity while maintaining the coherence of a grid structure.

In the Classroom

Art teachers can use this tool to introduce geometric abstraction and the De Stijl movement. Generate compositions at different grid densities: /matrix/2/2 produces bold, simple divisions; /matrix/8/6 creates complex arrangements. Ask students to compare random compositions with actual Mondrian paintings and identify what makes deliberate composition different from random generation. The answer reveals the artist's eye: Mondrian spent weeks adjusting proportions that this tool generates in milliseconds.

Explore Award-Winning Generative Design

The grid compositions above demonstrate how simple geometric rules can produce endlessly varied visual outcomes. Inspired by the structural ideas of neoplasticism, vertical and horizontal divisions create unequal rectangles, while generative color palettes introduce fresh chromatic relationships each time the layout is produced. Although dice83's grid compositions are generated through randomness and algorithms, they echo a long tradition of rule-based visual systems where structure, proportion, and color interact to create balance. In contemporary generative design, similar approaches are used to explore algorithmic layouts, parametric graphics, and computational visual art. If this experiment with generative grids and color harmony sparks your curiosity, the A' Generative, Algorithmic, Parametric and AI-Assisted Design Award category highlights outstanding projects where designers use algorithms, code, and parametric logic to create innovative visual compositions as well as products and projects.

Above is today's featured Generative Design. Discover more works through the A' Design Awards.

Private by Architecture

Every composition is computed inside your browser. The server delivers the page. Your device creates the art. Downloaded images exist only on your machine.