Le04 Full Sol LeWitt Reproduction with D3

100%

Le04 Full Sol LeWitt Reproduction with D3

✓ Published0🌍 Public

Last edited May 11, 2023

Created on May 10, 2023

Forked from Le04 Sol LeWitt Reproduction with D3

This example generates a full-screen abstract composition inspired by Sol LeWitt’s wall drawings, using D3 to render overlaid striped rectangles. The code creates 120 horizontal and vertical bands, each partially hidden behind an SVG mask that reveals a repeating pattern of geometric symbols. Rendering uses d3.select, data joins with .join, and d3.range to drive the grid, while the mask layer applies both a normal and an inverted variant using d3.symbol and d3.symbols to define the cutout shapes. The result is a crisp, generative pattern displayed entirely as vector SVG.

AI-generated description

Some JS Basics

MIT Licensed

Similar vizzes

Loading thumbnail…

Le04 Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3.js. It renders a grid of thin horizontal and vertical SVG rectangles across the full browser window, with each line colored by default. Two circular masks reveal the lines: the first shows a white circle over a black background, while the second inverts the effect, hiding the circle and showing the surrounding lines. The code uses `d3.select`, `d3.range`, and `selection.join` to bind data and create the rectangles.

CColin Frutschi

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

91% match

Loading thumbnail…

Full Sol LeWitt Reproduction D3 v2

A full-screen D3 visualization reproduces Sol LeWitt’s wall drawing using 48 horizontal and 48 vertical striped rectangles. Two SVG masks, created with `d3.symbol` and the `symbols[0]` diamond path, define circular cutouts that invert the stripe pattern. The code uses D3 v7’s `select`, `range`, and `join` to generate elements, with the second mask rendered in opposite fill colors to create a contrasting central motif. Rendering is purely SVG-based without animation.

Ttverdone

90% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a full Sol LeWitt art piece using D3, displaying a grid of horizontal and vertical stripes that are selectively masked by geometric symbols. The artwork shows alternating bands of lines, with the vertical stripes masked by filled shapes and the horizontal stripes partially obscured. The code uses D3’s `select`, `range`, and `symbols` APIs to generate SVG rectangles and mask paths, rendering 100 lines in each direction across the full browser window. Two separate masks apply contrasting white and black fills to create the overlapping pattern effect.

PPareel Amre

90% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired generative drawing using D3 v7. It displays a grid of alternating horizontal and vertical striped rectangles, with two circular mask overlays that invert the pattern in one region to create a layered visual effect. The code uses `d3.range`, `d3.select`, and `symbol` to build the SVG shapes, applying masks via `<mask>` elements. The artwork is rendered entirely with SVG attributes, using a fixed 100-step loop for each stripe direction and a dynamic viewport-sized canvas.

Wwspwll@gmail.com

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

89% match

Loading thumbnail…

Full and Final Sol LeWitt Reproduction with D3

This example uses D3.js to recreate a Sol LeWitt-style wall drawing as a generative SVG composition. It displays a grid of alternating horizontal and vertical stripes overlaid with two large geometric symbols—a circular arc and a polygon—that act as masks, cutting their shapes out of the stripe pattern. The implementation leverages D3’s `select`, `range`, `symbol`, and `symbols` APIs to construct the masks and position them along a horizontal line, with the mask fill toggled to create positive and negative space. The entire graphic is built dynamically, sized to the full browser window, and rendered as an SVG document.

Rraturi22@gmail.com

89% match

Loading thumbnail…

full Sol LeWitt Reproduction with D3

This example shows a full-screen abstract geometric composition inspired by Sol LeWitt, built with D3 v7 and rendered as SVG. Two sets of overlapping horizontal and vertical striped rects create a grid, while a diamond-shaped mask and a circular mask reveal different sections of the pattern. The code uses `d3.select`, `d3.range`, `d3.symbol` with a square symbol, and `.join()` to generate the shapes. The masks are constructed with `svg.append('mask')`, combining black and white rects and paths to control visibility.

Rroyable88

89% match