Sole wit vertical bg with inner horizontal circle D3 2 class square method

100%

Sole wit vertical bg with inner horizontal circle D3 2 class square method

✓ Published1🌍 Public

Last edited Dec 19, 2022

Created on Dec 19, 2022

This example uses D3.js (v7) to recreate Sol LeWitt's Wall Drawing #370. It displays a full-screen SVG canvas containing two sets of thin, rectangular marks: vertical bands spanning the canvas height, and horizontal bands spanning its width. Two SVG masks restrict each band set to a circular region, creating a circle in the center where the vertical and horizontal lines intersect. The code generates marks using `d3.range` and appends them as SVG `rect` elements, leveraging the `mask` attribute to define the visual boundary.

AI-generated description

A reproduction of sole Wit art [Sole Wit art (https://www.metmuseum.org/blogs/metkids/2017/sol-lewitt-wall-drawing-370).

MIT Licensed

Similar vizzes

Loading thumbnail…

full Sole wit reproduction with D3

This example reproduces Sol LeWitt’s Wall Drawing 370 using D3.js and SVG. It draws a grid of 100 horizontal and 100 vertical thin rectangles that span the full width and height of the browser window. Two SVG masks—one featuring a large circular cutout and another with a smaller black circle on a white background—are applied to the respective rectangle groups, creating an overlapping circular reveal in the center. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the shapes and manage data binding.

CChawin Sungwalngern

87% match

Loading thumbnail…

Sol LeWitt reproduction with D3

This D3.js (v7) reproduction of Sol LeWitt’s Wall Drawing #370 uses SVG masks to create a circular viewing window. The code generates 100 horizontal and 100 vertical striped rectangles across the full canvas, with each set masked to reveal either a white circle on black or a black circle on white. The two masks are defined as `mask` and `mask2`, each containing a full-canvas rect and a 200-pixel-radius circle positioned at the center. The `select` and `range` APIs are used to construct the repeating rect elements via joins.

LLouis Astorg

85% match

Loading thumbnail…

Sol LeWitt in D3

This example reproduces a Sol LeWitt wall drawing using D3.js and raw SVG manipulation. It generates 100 vertical and 100 horizontal rectangles, applying circular masks to create intersecting line patterns against contrasting backgrounds. The code manually constructs SVG elements and mask definitions, using two masks with inverse color schemes to reveal or hide portions of the drawn lines. It relies on D3 for selection and the document object model, while the rendering approach uses native SVG APIs.

DDouChinn

84% match

Loading thumbnail…

Sol Lewwit D3

This example recreates Sol LeWitt’s wall drawing aesthetic using D3.js and SVG. Two sets of 100 horizontal and vertical stripes are rendered across the full viewport, each configured with a mask that reveals a circular region in the center. The circle masks create an interplay between the two orientations, highlighting where horizontal lines show through one mask and vertical lines through the other. The code uses `select`, `range`, and data joins from D3 v7, with SVG masks and rectangles composing the visual.

PPeiyang Li

84% match

Loading thumbnail…

Sol LeWitt Designs

This piece generates a Sol LeWitt-inspired wall drawing using D3. It displays 100 horizontal bands across the full screen, masked by a singular circular cutout. A second, vertical set of bands is masked by an inverted circle, creating a geometric interplay of lines and voids. The code demonstrates D3's selection and join APIs to build the SVG structure, with the circular masks defining the visible regions.

AAshtone Onyango

84% match

Loading thumbnail…

full Sole wit reproduction with D32

This example reproduces Sol LeWitt’s wall drawing using a generative approach. It displays two sets of thin, horizontal and vertical stripes across the full canvas, each filtered by a circular mask to form a central geometric pattern. The implementation relies on the D3.js library, using `d3.select`, `d3.range`, and `d3.symbol` to create SVG shapes and masks. The masks, defined as `mask_1` and `mask_2`, alternately invert the visibility of the stripes, producing the overlapping effect. The render is driven by the D3 version 7.7.0 API and output as SVG.

CChawin Sungwalngern

84% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, displaying a grid of horizontal and vertical bars that intersect within two circular regions. The visualization shows a geometric pattern where a circle in the center masks horizontal lines, and a second ring-shaped mask reveals vertical lines around it. The code uses D3 selections and the `range` function to generate 100 rectangles in each orientation, applying SVG masks (`circle-mask` and `circle-mask-2`) to control visibility. The rendering is done entirely with SVG elements, with the artwork filling the full browser window.

Aajoua

84% match

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

83% match