D3 - LeWitt Full 2

100%

D3 - LeWitt Full 2

✓ Published1🌍 Public

Last edited Sep 29, 2022

Created on Sep 29, 2022

This generative art piece creates a grid-based composition of horizontal and vertical bars overlaid with a star-shaped mask. The artwork is built using D3.js, with the `select`, `range`, `symbols`, and `symbol` APIs. Two sets of rect elements are positioned and sized based on calculated indices, then masked by two separate mask definitions, each containing a star path from D3's symbol set. The rendering is an SVG output, filling the entire browser viewport and resulting in a dynamic interplay between the striped background and the cutout star shapes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 - LeWitt Full 5

This example generates a generative art composition in the style of Sol LeWitt, using an SVG canvas and D3.js. Horizontal and vertical striped bars are combined with two masks containing scaled D3 symbols, creating an intersecting interplay between the bar grid and the shapes. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` with `d3.symbol()` to render the masked paths. The output is a purely procedural, abstract visualization driven by layout and masking logic, with no external data source.

Ttomasnihlen

92% match

Loading thumbnail…

D3 - LeWitt Full 3

This visualization uses D3.js to generate a layered composition of horizontal and vertical bands that interact through custom SVG masks. The code creates 100 alternating stripes across the canvas, with horizontal bars masked against circular symbols and vertical bars masked against their inverse, producing an intricate geometric interplay inspired by Sol LeWitt's wall drawings. Using D3's `select`, `range`, and `symbol` APIs, the example constructs two overlapping line grids whose visibility is modulated by the mask patterns, creating a dynamic Moiré-like effect. The piece is rendered entirely as SVG, with the mask system built through reusable functions that toggle between positive and negative space.

Ttomasnihlen

91% match

Loading thumbnail…

D3 - LeWitt Full 4

An algorithmic drawing of interlocking geometric bands fills the entire viewport. It uses two perpendicular sets of thin, rectangular strips that are selectively masked by a large, rotated shape. The masks define overlapping silhouettes across the bars, creating a dynamic visual interplay reminiscent of Sol LeWitt’s wall drawings. The piece is rendered in SVG using D3’s `select`, `range`, `symbols`, and `symbol` APIs, applying `mask` elements to produce the composite result.

Ttomasnihlen

89% match

Loading thumbnail…

D3 - LeWitt Full

This example uses D3 (version 7) to generate an abstract geometric composition inspired by Sol LeWitt. Horizontal and vertical striped rectangles are layered and masked by a central diamond shape, created with the `symbol` API. Two SVG masks—one inverted—control which stripes appear inside versus outside the diamond, producing a cross-hatched visual effect. The rendering is purely computational, using `range`, `join`, and SVG elements without any external data source.

Ttomasnihlen

88% match

Loading thumbnail…

LeWitt D3 Symbols

A generative geometric composition inspired by Sol LeWitt uses D3 v7 to render black bars across the full window. The SVG defines two masks—a circle and a star—and applies them to alternating horizontal and vertical bar groups, creating intersecting line patterns. `d3.range` and `d3.symbol` generate the shapes, while `select` and `join` manage the 100 rects per axis. The result is a minimal, modular artwork built entirely with scalable vector graphics.

MMarvin Frede

87% match

Loading thumbnail…

D3 - LeWitt Horisontal

This example creates a generative grid of horizontal and vertical bars using D3.js, with a circular mask that reveals the intersection of the patterns. The visualization uses `select`, `range`, `append`, `attr`, and `join` to build SVG `rect` elements dynamically, while two masks (`circle-mask` and `circle-mask-2`) invert the visibility of the bars within a central circle. The result is a crosshatch of lines forming a negative-space circle at the center of the canvas, rendered in pure SVG without external data.

Ttomasnihlen

87% match

Loading thumbnail…

LeWitt D3

This example creates a full-screen generative drawing inspired by Sol LeWitt’s minimalist wall drawings, using raw SVG rectangles rather than the D3 library (which is listed as a dependency but unused in the code). It calculates the number of bars based on the browser window’s width and height, rendering evenly spaced vertical black bars that alternate with gaps of equal size. The rendering approach directly manipulates the SVG namespace via `document.createElementNS`, setting each rectangle’s position and dimensions dynamically to fill the viewport. The result is a simple, procedural grid pattern that responds to the window size.

Ttomasnihlen

84% match

Loading thumbnail…

Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a full-screen SVG grid of overlapping horizontal and vertical bars. Two distinct masks, created with inverted black-and-white shapes from D3’s `symbol` API, selectively reveal or hide portions of the grid, producing layered, intersecting patterns. The code uses D3’s `select`, `range`, and `join` methods to efficiently generate and update the 100 rectangles per orientation, while the `mask` elements dynamically apply the symbolic clipping paths. The final visualization is a clean, generative art piece driven entirely by SVG and D3’s declarative API.

Jjmetzg11alpine

83% match