Full Sol LeWitt Reproduction with D3 Draft

100%

Full Sol LeWitt Reproduction with D3 Draft

✓ Published1🌍 Public

Last edited Apr 21, 2021

Created on Apr 21, 2021

Forked from Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, displaying a grid of thin, alternating horizontal and vertical strokes that cover the full canvas. The piece generates its geometric pattern by drawing 100 horizontal and 100 vertical lines, each masked with an inverted circular symbol from D3’s `symbols[1]` (a circle) to create a subtle ring-like fade at the center. The code relies on `d3.select`, `d3.range`, and D3’s `.join` API for efficient SVG element creation, applying masks via `svg.call` with a custom `renderMask` function. The rendering is entirely SVG-based, with the final output sized to the browser window.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example replicates a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes across the full browser viewport. Two SVG masks, each containing a large circle, selectively reveal the stripes: one mask shows the lines inside the circle, while the other hides them, creating an inverted pattern. The code uses `d3.select`, `d3.range`, and `d3.symbol` to construct the overlapping line groups and circular mask shapes, with the SVG output generated dynamically from JavaScript.

WWolfgang

95% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering 100 horizontal and 100 vertical stripes across the full browser window. It uses SVG masks to create alternating circular cutouts: the first mask (mask-1) reveals the grid in white with a black circle, while the second (mask-2) inverts the effect. The code employs D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the geometric composition. The final output is a generative pattern where the intersection of stripes and circular voids produces the artwork’s characteristic visual rhythm.

CCurran Kelleher

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

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

94% match

Loading thumbnail…

Full Sol LeWitt Reproduction With D3

This example reproduces a Sol LeWitt-style drawing using D3.js, rendering a full-screen SVG composed of 100 horizontal and 100 vertical stripes that are masked by two overlapping circular forms. The code directly uses `d3.select`, `d3.range`, and the `join` API to append and position the rectangles, while `d3.symbol` and `d3.symbols` generate the circular mask paths. The two masks, one inverted, are applied via the `mask` attribute to create a subtle interplay between the grid and the geometric shapes. The visualization responds to the browser window’s dimensions, as the width and height are taken from `window.innerWidth` and `window.innerHeight`.

Wwgloss

93% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3.js

This example reproduces a Sol LeWitt art piece using D3.js and SVG. It generates a grid of horizontal and vertical rectangles, then applies two masks that shape the visible pattern. The masks are created with D3’s `symbol` and `symbols` APIs, placing geometric symbols in alternating black-and-white fills to selectively hide or reveal parts of the grid. The code uses `select`, `range`, and `.join()` to efficiently render the elements, with the rendering confined to the full browser viewport.

MMarcus Vinicius da Silveira Richa

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

93% match

Loading thumbnail…

Full Sol Lewitt Reproduction with d3

This example reproduces a Sol LeWitt wall drawing as a full-screen SVG. It uses D3's `select`, `range`, and `join` APIs to generate a grid of alternating horizontal and vertical stripes. Two masks, created with `symbol` and `symbols` from D3, overlay the grid: one applies a white-on-black path pattern, the other inverts it, producing a layered geometric composition. The drawing adapts to the browser window's dimensions, with the mask symbols centered and scaled to a fixed size.

VVincent Leduc

93% match