Skip to main content
SimilarExport ZIP
100%

full Sole wit reproduction with D3

✓ Published1🌍 Public
CChawin Sungwalngern
Last edited Dec 19, 2022
Created on Dec 19, 2022

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.

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 D32 multiple symbol

This visualization reproduces Sol LeWitt’s Wall Drawing #370 using two overlapping sets of horizontal and vertical bands, each masked by a large geometric symbol. The first mask creates vertical stripes from 100 horizontal rectangles, while the second, inverted mask shapes horizontal stripes from vertical rectangles. Built with D3.js, it uses `select`, `range`, `symbol`, and `symbols` to generate the complex mask paths, and renders entirely as SVG, with dimensions matching the browser window.

CChawin Sungwalngern
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3 Draft

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.

AAndre J Denais
91% 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
91% 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
90% 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
90% 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
90% 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
90% match
Loading thumbnail…

Full So LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing using D3.js. It renders a full-screen SVG with two sets of evenly spaced horizontal and vertical lines, creating a grid. Two masks are applied to the line groups, each utilizing a circle symbol generated by D3’s `symbol` API with a large radius, effectively cutting circular holes in the grid pattern. The code uses D3’s `select`, `range`, and `symbol` functions, with the second mask inverting the circle’s fill to create a complementary visual effect.

Mmax-31
90% match