adonisacruz0@gmail.com

Sol LeWitt

This example generates three full-screen SVG compositions of overlapping horizontal and vertical striped rectangles, each masked into a distinct geometric shape: a circle, a triangle, and a rectangle. Using D3 v7, it constructs 100 thin bars per axis and applies SVG masks to reveal only the portions inside each shape. The code combines D3’s selection and join methods with custom mask definitions and symbol paths, such as `d3.symbolTriangle`, to render the layered patterns in the browser.

D3 Sol Lewitt

This example generates a geometric composition reminiscent of Sol LeWitt's wall drawings, using a series of horizontal and vertical bands that are selectively revealed through SVG masks. The design employs two distinct masks, each containing a circle, triangle, and rectangle, to create overlapping positive and negative shapes against a full-screen canvas. Built with D3 v7 and rendered as SVG, the code defines shapes using `d3.symbol()` for the triangle path, while the masks apply `url(#circle-mask)` and `url(#circle-mask-2)` to alternating striped rectangles. The result is a dynamic interplay of primary colors in black and white, driven entirely by procedural generation.

Sol Lewitt

A generative art visualization recreates Sol LeWitt’s geometric style by layering 100 horizontal and 100 vertical striped rectangles over the full viewport. Two SVG masks combine to create a central circular window: the horizontal stripes are visible inside a white circle, while the vertical stripes appear outside it. The code builds the SVG programmatically using standard DOM APIs such as `createElementNS` and `setAttribute`, with masks (`mask`, `mask2`) controlling the blend of the two line grids.

Wall Drawing # 1136 attempt

This example recreates Sol LeWitt’s Wall Drawing #1136 using the SVG API inside a plain HTML script. It renders 100 vertical color-banded rectangles across the full window width, then overlays a single complex closed path, repeated eleven times with shifting vertical translations and scale transformations. Each path copy uses one of eleven hard-coded hex colors, cycling through the palette. The drawing’s structure follows the artist’s geometric instructions, with no external data source, and relies on direct DOM manipulation via `document.createElementNS`.

Lollipop charts

pacman

This example visualizes the classic Pac-Man character and dots using SVG shapes. It shows a yellow circle with a wedge-shaped mouth, created with a path, and a small black eye. Three yellow dots trail the character to the right. The code uses hand-coded SVG elements, including `circle` and `path`, combined with CSS for styling and a `transform` to flip the mouth shape. The static vector graphics are drawn directly in HTML.