Skip to main content
SimilarExport ZIP
100%

Recreated Sol LeWitt Reproduction in D3

✓ Published1🌍 Public
CCameron Wehr
Last edited Sep 8, 2023
Created on Sep 8, 2023

This example recreates a Sol LeWitt drawing using D3.js, rendering a grid of horizontal and vertical bars that are revealed through circular masks. The composition shows a central circle cut out from both a field of horizontal stripes and a field of vertical stripes, creating an intersecting geometric pattern. The code uses D3 selections (`select`, `range`) to append SVG elements, and applies `mask` attributes with `circle-mask` and `circle-mask-2` to layer the two stripe directions. Rectangles are generated via a join operation, with masks defined by black and white fill rectangles and circles.

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-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
93% 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
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 AG

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical bars on a full-window SVG canvas. Two mask elements with contrasting black-and-white fill patterns clip the bars, creating a circular window at the center that reveals the layered strip intersections. The code uses `select`, `range`, `join`, and `attr` to generate 100 rectangles in each direction, with `append('mask')` defining the circle masks. The composition directly reflects LeWitt's geometric, rule-based aesthetic through D3's data-driven SVG generation.

Gguththered
92% 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
92% match
Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt–inspired geometric composition using D3 v7. It renders a grid of horizontal and vertical bars, each clipped by a circular mask to create a bold, minimalist pattern. The code uses `d3.select`, `d3.range`, and `join` to generate SVG `<rect>` elements, while two overlapping masks (`circle-mask` and `circle-mask-2`) selectively reveal or hide bars within and outside the central circle. The result is an interplay of lines and negative space, driven entirely by SVG primitives and data-driven iterations.

FFrancisco Ibelles
92% 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
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece uses SVG to render a grid of horizontal and vertical black bars over a full-screen canvas. Two circular masks, defined via SVG `<mask>` elements, create a central circular window: the first mask reveals a white circle, while the second inverts it with a black circle, producing a layered visual effect. The code uses `d3.select`, `d3.range`, and data joins (`append` and `join`) to generate 100 rect elements in each direction, with the masks controlling visibility.

SSalahAnwer-dev
92% match
Loading thumbnail…

Sol LeWitt Reproduction in D3

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