Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
TTobi Olabode
Last edited Nov 6, 2023
Created on Nov 6, 2023

This example reproduces a Sol LeWitt wall drawing using D3.js, layering horizontal and vertical striped rectangles on an SVG canvas. The composition uses two masks with inverted circle shapes to create a central circular cutout, revealing the grid-like pattern of 100-pixel stripes. The code employs D3’s `select`, `range`, `append`, and `join` APIs to generate the SVG elements dynamically, with masks defined via `mask` and `circle` elements. The artwork spans the full browser viewport, adapting its size to the window dimensions.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3. It draws a grid of horizontal and vertical rectangles that are masked by two circles, creating a pattern of alternating lines within circular cutouts. The code uses D3’s `select` and `range` functions to generate SVG elements, and applies SVG masks with `circle` elements to clip the rectangles. The artwork is rendered as an SVG, filling the browser window.

Rrwata97
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, rendering 100 horizontal and 100 vertical striped rectangles in an SVG canvas. The artwork uses two circular mask patterns—one with a black background and white circle, another with inverted colors—to create intersecting circular cutouts where the lines cross. The code uses D3's `select`, `range`, and `join` APIs to efficiently generate and position the rect elements, with the masks applied via SVG `mask` attributes to achieve the geometric composition.

Jjctmercado
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.3.0, generating a grid-like pattern of alternating vertical and horizontal bands over the full browser viewport. The artwork uses two SVG masks—one with a white circle punched through black and another with a black circle on white—so that vertical stripes appear only within the circular region, while horizontal stripes are visible everywhere except inside that circle. The code constructs 100 rectangles in each orientation via `selectAll` and `data().join()`, setting positions and dimensions to cover the canvas.

SSamuele Greco
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt art piece using d3 to render horizontal and vertical striped rectangles within a circular mask, creating a geometric pattern that fills the browser window. The SVG output uses two masks—one circular and one inverted—to alternately reveal horizontal or vertical bands across the canvas. Built with d3.select and SVG attributes, the code generates 100 rect elements in each orientation, with the circular mask defined via mask elements and fill colors. The artwork dynamically adapts to the window’s width and height, reflecting LeWitt’s instructional-based aesthetic in a programmatic form.

Iinnocent thomas
94% match
Loading thumbnail…

Fork of Sol Lewitt Reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3 v7, generating a grid of horizontal and vertical stripes overlaid with a circular mask. The SVG rendering shows a black-and-white composition where two perpendicular striped layers intersect, with a central circle revealing horizontal bands while the outer area displays both orientations. The code uses `d3.select`, `d3.range`, and `join` to create rectangles, and applies SVG `<mask>` elements with circles to control which stripes appear in each region, with the circle radius derived from a fixed pixel step.

VVincent Leduc
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using D3.js, rendering a grid of thin vertical and horizontal lines that are visible only within a circular area at the center of the canvas. The code first draws 100 vertical strips, then applies an SVG mask with a white circle to reveal only the central portion, and finally adds 100 horizontal strips masked the same way. It uses D3’s `select`, `range`, and element joins to generate the rectangles, with the mask defined as an SVG `<mask>` containing a `<circle>`. The rendering output is an SVG graphic sized to the full browser window.

Ppeter@attachmentdivision.com
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece by layering two alternating sets of mask-applied stripes on an SVG canvas. Horizontally and vertically oriented rectangles are drawn using D3’s `select`, `append`, and `join` APIs, with each set filtered through a circular mask to reveal the intersecting bands within a central circle. The second mask inverts the first, creating a positive/negative interplay of the grid. The code relies on D3 for DOM manipulation and uses window dimensions to scale the piece to the full browser viewport.

Ccdholmes11
93% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3 Classes

This example reproduces a Sol LeWitt wall drawing using SVG and D3.js v6.6.1. It displays a grid of horizontal and vertical stripes, masked by two overlapping circles to create a pattern of contrasting line directions. The code uses D3’s `select`, `range`, `.append`, `.attr`, `.data`, and `.join` APIs to construct the SVG elements directly. Two SVG masks (`circle-mask` and `circle-mask-2`) define the circular visibility regions, with the vertical lines visible inside the first circle and the horizontal lines visible inside the second. The drawing fills the entire browser window.

GGbemiga Atolagbe
93% match