Sol LeWitt Reproduction in D3

100%

Sol LeWitt Reproduction in D3 - Javan

✓ Published1🌍 Public

Last edited Jun 16, 2022

Created on Jun 16, 2022

This example recreates a Sol LeWitt-inspired geometric composition using D3.js and SVG rendering. It displays a grid of thin horizontal and vertical rectangles layered over each other, with two circular masks creating intersecting circular cutouts that reveal or hide portions of the rectangles. The code uses D3 selections, `range()` for data generation, and `.join()` to bind 100 rectangles per axis to the SVG. The `mask` element defines the circular regions, with one mask using a white circle on black and the other using a black circle on white.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3. It shows a grid of horizontal and vertical striped rectangles intersecting over a central circular opening, created through two SVG mask layers. The code uses D3 selections, `data` binding with `range(n)`, and the `join('rect')` pattern to generate the marks. Each mask combines a full-size rect with a circle to reveal or hide portions of the grid. The rendering is done in SVG, sized to the full browser window.

AArvi

92% match

Loading thumbnail…

Full Sol LeWitt Reproduction in D3 - Javan

This example reproduces a Sol LeWitt art piece using D3’s SVG rendering. It displays two sets of overlaid horizontal and vertical striped rectangles, masked to reveal a diamond shape in the center and a circular cutout, creating layered geometric patterns. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate the shapes, applies SVG masks via `mask` elements, and sizes the artwork to the full window dimensions.

JJavan Friedel

92% match

Loading thumbnail…

This example recreates a Sol LeWitt-inspired geometric composition using D3.js. It renders a grid of horizontal and vertical SVG rectangles across the full window, with each set masked to reveal intersecting circular cutouts at the center. The visualization relies on d3.select, d3.range, and SVG mask elements to layer two sets of stripes, alternating black and white fills within the circles. The result is a clean, minimal pattern that mimics the artist’s systematic approach to drawing, with no data input beyond the generated grid dimensions.

Mmaciekawsq@gmail.com

92% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using SVG and D3. It displays a grid of 100 horizontal and vertical bars, each 10 pixels thick, layered over one another. A circular mask isolates a portion of the grid, creating an interplay between the two orientations. The code uses `d3.select` and `d3.range` to generate the rectangle elements, with two masks (`circle-mask` and `circle-mask-2`) defining the visible region. The rendering approach relies on SVG attributes for positioning and masks, with the canvas size set to the full window dimensions.

IIgorGorin00

91% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, generating a grid of thin horizontal and vertical rectangles that overlap across the full browser window. The composition uses SVG masks to create alternating visibility: one mask reveals a central diamond shape against a black background, while the other inverts the pattern with a white background. The code leverages D3’s `select`, `range`, and `join` to append rectangles, and `symbol` with `symbols` to define the diamond mask paths. Rendering is SVG-based, with masks applied via the `mask` element.

Jjajinkya

91% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3. It displays a grid of horizontal and vertical bars overlaid with two circular masks, creating a crosshatched pattern that alternates visibility within and outside the circles. The code uses D3 selections, `range()`, and SVG masks (`mask` elements) to generate the repeating rectangles. It employs `d3.select`, `append`, and `attr` with data-driven joins, rendering entirely as SVG in the browser. The art piece is recreated computationally, with the layout determined by the window dimensions.

XXuân Vinh

91% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6.6.1 in an SVG rendering. It displays a grid of thin horizontal and vertical rectangles, masked so they only appear within two overlapping circular regions at the center of the screen. The code uses `d3.select` to append SVG elements, `d3.range` to generate data arrays, and the `.join()` pattern to bind data to `rect` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) define visibility, with the first using a black background and white circle, the second inverted.

CCurran Kelleher

91% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical striped rectangles across the full viewport. Two SVG masks, each combining a full-screen rectangle with a centered circle, restrict which stripes are visible. The first mask (circle-mask) reveals horizontal lines through a white circular opening on a black background, while the second (circle-mask-2) inverts the pattern for vertical lines. Using d3.select, range, and data joins, the code generates 100 rect elements per orientation, with masks applied via the mask attribute.

PPareel Amre

91% match