Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3_test

✓ Published0🌍 Public
Ppawelsapiecha
Last edited Oct 29, 2022
Created on Oct 25, 2022

This example reproduces a Sol LeWitt-inspired geometric artwork using D3.js. It renders a grid of thin, alternating horizontal and vertical lines by combining SVG `rect` elements with two custom masks, creating an intersecting pattern that visually shifts between the two orientations. The JavaScript code uses D3 APIs such as `select`, `range`, `symbol`, `scaleBand`, and the `join` method to generate the 120-line structure. Each mask cycles through symbols from D3’s symbol set to alternate black and white fill, producing the final composed effect. The SVG output is sized to the full browser window.

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.js version 6 and SVG rendering. The visualization shows a grid of horizontal and vertical rectangles, with two circular masks creating a layered geometric pattern where the lines alternate visibility. The code employs `d3.select`, `d3.range`, and the `join` method to generate 100 rect elements for each orientation. SVG masks—defined with distinct IDs and circles of white and black fills—control which line segments appear within the overlapping circular regions.

PPeter Prevos
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js and SVG rendering. It displays a grid of horizontal and vertical black lines that form a geometric pattern across the full viewport, with a circular white mask creating a negative-space shape in the center. The code uses D3 selections with `range`, `join`, and `attr` to generate repeated rectangles on each axis, while masks are built with `append('mask')` and SVG circles. The rendering is entirely procedural, generating 100 lines per direction from data arrays rather than loading external data.

Xxyzcorrupt@gmail.com
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, displaying a grid of alternating horizontal and vertical striped lines across the full browser window. Two SVG masks reveal the grid through circular and geometric shapes, while the second mask incorporates D3 symbol shapes and checkerboard patterns within its design. The code uses D3 v7 APIs including `select`, `range`, `symbol`, and `symbols` to generate the SVG elements, with mask composition controling which portions of the line grid remain visible.

AAngie Va. Moreno
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt geometric art piece using D3.js. It renders a grid of alternating horizontal and vertical black and white bands, with circular symbols and masks creating a complex, overlapping pattern. The visualization uses D3’s `scaleBand`, `range`, `symbols`, and `symbol` APIs, along with SVG masks and `<rect>` elements, to generate the composition dynamically. The code adapts to the browser window size and relies on D3’s `select` and `append` for DOM manipulation.

HHi I am Adil
93% match
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
93% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 version 7. It displays a grid of horizontal and vertical lines overlaid with two masks, each containing a row of distinct geometric symbols. The horizontal lines are masked by one set of symbols, while the vertical lines are masked by an inverted set, creating a layered, intertwined visual effect. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG shapes and `append('mask')` to apply the masking logic dynamically.

Aajoua
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, generating a grid of thin horizontal and vertical rectangles across the full browser window. The visualization appears as a dense crosshatch pattern, with a circular region in the center where the lines are inverted—dark lines show through a light circle, while the surrounding area has light lines on a dark background. The code builds an SVG, creates rect elements with D3’s `range` and `join` methods, and applies two SVG masks with circles to achieve the contrasting effect.

FFerasMorsi
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6, rendering a grid of horizontal and vertical stripes masked by two concentric circles. The visualization shows a geometric pattern of alternating line thicknesses, with the circular masks creating a layered negative-space effect. The code uses `d3.select`, `d3.range`, and `join` to generate SVG rectangles, while SVG `<mask>` elements with `circle` and `rect` shapes define the visible regions. All rendering occurs client-side in SVG, with dimensions set to the full window size.

AAdityan Nainar
93% match