Fork of Sol LeWitt Reproduction with D3

100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public

Last edited Feb 5, 2023

Created on Feb 5, 2023

This example reproduces a Sol LeWitt art piece as an interactive SVG graphic. It generates a grid of 120 horizontal and vertical bands, each with a repeating pattern that shifts based on a mask. The code builds two alternating bands of white and black, then uses two masks, each applying a different pattern rotation. Using the D3 library, it leverages `select`, `range`, `symbol`, `symbols`, and `scaleBand` to construct the visual, with `symbol(d, size)()` generating the shape paths. The rendering is fully in SVG, defined entirely in `index.js` with `window.innerWidth` and `window.innerHeight` for dimensions and a `padding` constant.

AI-generated description

A reproduction of a Sol LeWitt art piece.
This time, we repeat the previous program but incorporate D3 and make the complete Sol Lewitt art using d3 symbols package.
attr accepts both constant values and functions
use class or group elements to ensure 2 svg objects do not try to operate on same data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate geometric patterns of horizontal and vertical bands. It employs `d3.select`, `d3.range`, `d3.scaleBand`, and `d3.symbol` to create SVG rectangles and symbols within two masks, alternating their fills to produce an interlocking striped composition. The code uses an SVG renderer with `window.innerWidth` and `window.innerHeight` for full-screen display. While mask creation functions are defined for both layers, only the initial band structures are rendered in the current setup.

Aaalyousfi

94% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example generates an abstract visual composition inspired by Sol LeWitt, using D3 to create a grid of alternating horizontal and vertical bands. Two SVG masks, built with `d3.symbol` and `scaleBand`, modulate the bands with geometric symbol shapes. The code applies `select`, `range`, and `symbol` from D3 v6 to render the patterns, with the rendering handled entirely in SVG. The design reproduces the algorithmic, rule-based aesthetics of LeWitt’s wall drawings through code-driven geometry.

Bbeyzadoganay

93% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to create a grid of horizontal and vertical stripes that alternate based on masks containing overlapping symbol shapes. Two sets of rectangular bands are drawn, each masked by a pattern of symbols (using `d3.symbol` and `d3.symbols`) arranged across the width via `d3.scaleBand`, with inverted black-and-white fills. The SVG rendering uses `select`, `range`, and `join` to generate 120 stripes per dimension, with masks (`<mask>`) controlling which areas of the two layers remain visible. The result is a geometric interplay of lines and icons derived from LeWitt’s conceptual style.

Jjsoudeer

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3_test

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.

Ppawelsapiecha

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt art piece using D3, generating a series of horizontal bars that are clipped by a circular mask. The visualization fills the entire browser window with alternating offset rectangles, creating a geometric pattern. The code uses D3's `select` and `range` functions to build SVG elements, though the mask and circle logic is present but commented out. The rendered output shows a grid of colored bands restricted to a central circular area.

Bbtlhgboy@icloud.com

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.3.0, generating a grid-like pattern of alternating vertical and horizontal bands over the full browser viewport. The artwork uses two SVG masks—one with a white circle punched through black and another with a black circle on white—so that vertical stripes appear only within the circular region, while horizontal stripes are visible everywhere except inside that circle. The code constructs 100 rectangles in each orientation via `selectAll` and `data().join()`, setting positions and dimensions to cover the canvas.

SSamuele Greco

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece by generating a grid of horizontal and vertical bands that intersect within a circular boundary. It shows how simple geometric repetition creates a complex moiré-like pattern, with the circle acting as a focal point where the two orientations overlap. The code builds SVG elements dynamically using raw JavaScript and the DOM API, drawing rectangles at fixed 20-pixel intervals and applying two SVG masks—one to reveal the horizontal stripes inside the circle and another to show vertical stripes outside it. It imports `selection` from the D3 library, though the rendering relies entirely on manual SVG creation rather than D3’s data-binding methods.

Aag17@tutanota.de

92% match

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This D3.js (version 7.8.5) reproduction of a Sol LeWitt art piece generates an SVG canvas filling the browser window. It draws 100 horizontal and 100 vertical bands of alternating dimensions, each masked to create a circular intersection pattern. The code uses D3’s `select`, `append`, `range`, and `data().join()` API to generate the SVG elements. Two SVG masks (`circle-mask` and `circle-mask-2`) control visibility, with the second inverting the circular mask to create complementary transparency effects.

Bbtlhgboy@icloud.com

91% match