D3 - LeWitt Horisontal

100%

D3 - LeWitt Horisontal

✓ Published1🌍 Public

Last edited Sep 26, 2022

Created on Sep 26, 2022

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.

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

90% match

Loading thumbnail…

LeWitt Horisontal

This example generates a full-screen composition of horizontal bars, using D3.js to create SVG rectangles that tile the viewport. The visualization relies on D3’s `select` and `append` API to build the SVG structure dynamically. The pattern resembles Sol LeWitt’s wall drawings, with a straightforward, systematic placement of bars. The code includes commented-out mask and circle elements, though these are not active in the final render. The result is a clean, generative graphic that adapts to the browser window size.

Ttomasnihlen

89% 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

89% match

Loading thumbnail…

D3 - LeWitt Full 2

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.

Ttomasnihlen

87% match

Loading thumbnail…

Sol LeWitt with D3

This example generates a grid of 100 horizontal and vertical bars in SVG using D3’s `select`, `range`, and `join` methods. Two circular masks reveal overlapping patterns: the first shows horizontal bars inside a white circle, while the second inverts the effect for vertical bars. The rendering uses D3 selections to append rectangles and mask elements to the page, creating a Sol LeWitt-inspired geometric composition.

JJetlinZ

86% match

Loading thumbnail…

Sol LeWitt with D3

This example recreates a Sol LeWitt–inspired geometric drawing using D3.js. It displays 100 horizontal and 100 vertical rectangles that intersect within two circular masks, producing a crosshatched pattern confined to circular regions. The visualization uses D3’s `select`, `range`, and data joins to bind arrays of indices to SVG `rect` elements. Masking is implemented with two SVG `mask` definitions, each combining a full-canvas rectangle with a circle, to alternately reveal or hide the grid lines.

Llukasreber

86% match

Loading thumbnail…

D3 Sol LeWitt pt2

This example reproduces a Sol LeWitt wall drawing using D3.js and SVG rendering. It displays a grid of horizontal and vertical bars that intersect, with circular masks applied to create a rounded viewing window in the center of the canvas. The code uses D3’s `select`, `range`, and `join` APIs to generate the rect elements, and constructs two SVG masks—one with a white circle on black and another with a black circle on white—to reveal and conceal portions of the bars. The visualization fills the entire browser window, with the bars spaced at 20-pixel intervals.

AArturo Guevara

85% match

Loading thumbnail…

LeWitt Recreation w/ D3

This example recreates a Sol LeWitt-style geometric drawing using D3.js v7 and SVG rendering. It displays a grid of horizontal and vertical black bars overlaid on a full-window canvas, with a circular mask creating a central void. The code uses D3's `select`, `range`, and `join` to generate 100 rect elements in each orientation, while SVG `mask` elements with white and black shapes define the visible regions. The result is a minimalist pattern that demonstrates simple masking and data-driven shape generation.

MMarvin Frede

85% match