Skip to main content
SimilarExport ZIP
100%

Sol LeWitt reproduction with d3

✓ Published1🌍 Public
FFrancisco Ibelles
Last edited Feb 7, 2024
Created on Feb 7, 2024

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.

AI-generated description

Example of a picture create for le author Sol LeWitt

MIT Licensed

Similar vizzes

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
94% 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
94% 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 alternating horizontal and vertical SVG rectangles that are masked to reveal a circular viewing window at the center of the page. The code uses `d3.select` and `d3.range` to generate 100 rect elements per direction, with two distinct SVG masks (`circle-mask` and `circle-mask2`) that control visibility by combining black and white fill shapes. The visualization is entirely procedural, with no external data source, and adapts to the full browser viewport.

PPetrescu Alexandru
93% match
Loading thumbnail…

Sol LeWitt Reproduction With D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, displaying a grid of horizontal bars that form a circular cutout in the center. The visualization shows 100 thin, full-width rectangles stacked vertically across the screen, with a circular mask applied to create a negative-space circle in the middle of the canvas. The code leverages D3’s `select`, `range`, and data-join methods to generate the SVG rectangles, while an SVG `<mask>` element containing a black rectangle and white circle defines the visible region. The rendering uses the D3 v7 library and outputs vector-based SVG graphics that fill the entire browser viewport.

PPrince Kumar
93% 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 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 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
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 v3 with SVG rendering. It shows a grid of horizontal and vertical rectangles overlaid with two circular masks, one inverted, creating a dynamic interplay of lines and negative space. The code uses `d3.range`, `d3.select`, and `d3.symbol` with `symbols[1]` to generate the mask paths. Horizontal and vertical bars are drawn at regular intervals, then clipped by the masks to produce the final pattern against a full-window canvas.

Ttriciascully
92% match