Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt reproduction with D3

✓ Published1🌍 Public
ZzolboBatsaikhan
Last edited Aug 30, 2022
Created on Aug 30, 2022

This visualization reproduces a Sol LeWitt art piece, featuring two sets of parallel lines that are masked to create a circular composition. The piece shows vertical and horizontal bands intersecting, with a central circular area where the line pattern is inverted. Built with D3.js, the code uses `range`, `select`, `symbols`, and `symbol` to generate SVG rectangles and a mask, applying the geometric abstraction in a dynamic, full-screen format. The rendering is purely SVG-based, with masks defining the circular interplay of the line grids.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a full Sol LeWitt art piece using D3, displaying a grid of horizontal and vertical stripes that are selectively masked by geometric symbols. The artwork shows alternating bands of lines, with the vertical stripes masked by filled shapes and the horizontal stripes partially obscured. The code uses D3’s `select`, `range`, and `symbols` APIs to generate SVG rectangles and mask paths, rendering 100 lines in each direction across the full browser window. Two separate masks apply contrasting white and black fills to create the overlapping pattern effect.

PPareel Amre
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical lines that intersect to form a subtle pattern across the full browser viewport. The piece relies on two SVG masks—one circular and one rectangular—to selectively reveal or hide portions of the line arrays. Specifically, a path generated via `symbol(symbols[1],100000)` creates a large circular mask over the vertical lines, while a black circle mask obscures the horizontal lines in a contrasting region. The code uses D3’s `select`, `range`, and `join` APIs to efficiently append hundreds of SVG rect elements, with all rendering performed client-side in SVG format.

Gguts
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js. It shows a grid of horizontal and vertical lines rendered as SVG rectangles, with the pattern dynamically clipped by two circular masks to create a complex, layered composition. The code uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate the shapes and paths. SVG masks are defined and applied to the line groups, with one mask inverted to produce the final visual effect. The rendering adapts to the browser window’s dimensions.

Aajoua
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

A full-screen SVG reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical lines, each line of constant width and separated by a fixed interval. D3’s `select`, `range`, `symbols`, and `symbol` APIs generate the line structure, while mask elements, created via the `renderMask` function, define cutout shapes—a circle and other geometric symbols—through which the lines are visible. The masks use fill colors to either hide or reveal lines, producing an inverted visual effect across the composition.

MMofizur Rahman
92% match
Loading thumbnail…

Full Sol LeWitt reproductions with d3

This example reproduces a Sol LeWitt piece using D3.js by generating a grid of horizontal and vertical lines. Two SVG masks, defined as "inner-mask" and "outer-mask", are applied to these lines to reveal or hide portions of the grid, creating a complex geometric pattern. The masks are constructed using D3's `symbol` and `symbols` APIs to draw paths that form the mask shapes. The code uses D3's `select`, `append`, `attr`, and `join` methods to build the SVG structure and apply data-driven attributes. The rendering is done entirely in SVG, scaling to the browser window size.

AAngela Kochoska
92% match
Loading thumbnail…

Sol LeWitt reproduction with D3

A full-screen SVG shows a grid of thin horizontal and vertical black lines, masked to reveal a central white circle on a black background. The piece reproduces a Sol LeWitt wall drawing: horizontal bars cross the entire canvas, while vertical bars are visible only outside a centered black circle. Using D3 selections and `range`, the code generates 100 rects for each orientation, then applies two SVG masks—one with a white circle to show the horizontal lines within it, and another with a black circle to hide the vertical lines there. The result creates a subtle interplay of line directions across the circular boundary.

ZzolboBatsaikhan
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction Final with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js to render a grid of thin horizontal and vertical lines across the full browser window. The piece uses SVG masks to create two contrasting geometric cutouts: a large white diamond-shaped symbol in the center and a black circular hole, revealing the line patterns beneath. The code employs d3.select, d3.range, and d3.symbol to generate the composition, with the mask elements dynamically positioned based on the viewport dimensions. The artwork is drawn entirely with SVG rectangles arranged by D3’s data join.

Kkwambokar
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This interactive SVG reproduction of a Sol LeWitt piece uses D3 to generate a grid of horizontal and vertical stripes. The code defines two masks that selectively reveal or hide the stripes based on a series of symbol-shaped paths, creating a dynamic and layered geometric composition. The program uses D3's `select`, `range`, `symbol`, and `symbols` functions to build the SVG elements and masks, with the rendering adapting to the window size. The artwork's behavior is driven entirely by the mask transformations and symbol generation.

Rrwata97
92% match