Skip to main content
SimilarExport ZIP
100%

group element D3 Sol LeWitt Reproduction

✓ Published1🌍 Public
Mmegan-grannan
Last edited Aug 10, 2023
Created on Aug 10, 2023

This example reproduces a Sol LeWitt-style drawing with layered horizontal and vertical stripes overlaid on a full-window SVG canvas. The piece shows a grid of thin, alternately oriented lines that are masked to reveal a central circular cutout, with the vertical and horizontal bands intersecting to create a woven pattern. Built using D3 v7, it employs `select().append()`, `range()`, and the `join()` operator to generate 100 rects in each group, while two SVG `<mask>` elements define the circular reveal and concealment for the line sets.

AI-generated description

Reproduction of Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction (D3 groups)

This example reproduces a Sol LeWitt art piece using D3 groups to draw two sets of overlapping stripes. One group renders 100 horizontal rectangles, and another draws 100 vertical rectangles, each set filtered through a circular mask. The code uses `select`, `append`, and `join` from D3's API, with the masks defined via `svg.append('mask')` and styled using `rect` and `circle` elements. The artwork dynamically fills the browser window, showcasing a grid-and-circle motif.

LLohitB
91% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 and groups

This example reproduces a Sol LeWitt-style drawing using overlapping horizontal and vertical striped rectangles, with a central circular region revealed through two complementary SVG masks. The code uses D3’s `select`, `range`, and `.join` API to generate 100 rects in each direction, setting their positions and dimensions from the window size. A `mask` element with a black background and white circle creates a circular window for the horizontal bars, while a second mask with inverted colors applies to the vertical bars, producing a contrasting intersection at the center.

PPetrescu Alexandru
90% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 using group elements

This example recreates a Sol LeWitt-inspired geometric composition using D3.js, displaying a grid of horizontal and vertical bars that intersect to form a pattern. The visualization uses two groups of rectangles, one arranged horizontally and one vertically, each masked to reveal a circular area in the center of the screen. SVG masks defined with `mask` and `circle` elements control the visibility, creating a layered effect where the bars appear only within the circular regions. The code leverages D3 selections and data joins with `select` and `range` to generate the rectangles dynamically.

Ttriciascully
88% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 (with SVG Groups)

This is a D3.js reproduction of a Sol LeWitt art piece, rendered in SVG. The visualization shows a grid of horizontal and vertical striped rectangles overlaid on the full viewport. Two SVG masks create a central circular cutout: one mask reveals a circle in the upper layer, while the other uses inverted colors to hide the circle in the lower layer, producing a contrasting visual effect. The code uses d3.select, d3.range, and attribute chaining to generate 100 rectangles in each direction, with dimensions tied to the window size.

Nnim@brejnholt.dk
88% match
Loading thumbnail…

D3 Sol LeWitt Reproduction

This example reproduces Sol LeWitt’s geometric wall drawing using D3 v7. It creates a full-screen SVG and populates it with two sets of 100 thin horizontal and vertical rectangles. Two SVG masks, each containing a central circle, are applied to the respective rectangle groups, making the horizontal lines visible only inside the first circle and the vertical lines visible only inside the second. The `select` and `range` functions from the D3 API are used to construct the SVG elements.

Mmegan-grannan
88% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6. It displays a grid of vertical and horizontal striped rectangles overlaid with two circular masks, creating intersecting line patterns. The visualization uses `d3.select`, `d3.range`, and the `join` pattern to generate 100 SVG rectangle elements in each direction. Two SVG masks, each containing a black or white circle, selectively reveal or hide portions of the stripes, producing the geometric contrast characteristic of LeWitt’s work. The SVG fills the entire browser window.

AAndre J Denais
88% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

A grid of horizontal and vertical striped rectangles is partially visible through two circular masks, creating a layered crosshatch pattern reminiscent of Sol LeWitt's geometric wall drawings. The example uses D3 selections with `selectAll` and `join` to bind data from `d3.range` to SVG `rect` elements, rendered directly as SVG. Two SVG `mask` elements define the circular cutouts: one inverts the grid by showing only the intersection of shapes, while the other reveals the full pattern. The code dynamically sizes the visualization to the full browser window.

Ppawelsapiecha
88% match
Loading thumbnail…

Sol LeWitt Reproduction - D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 version 7.8.5 in an SVG rendering. It shows a grid of 100 horizontal and vertical lines, with two circular masks creating a central overlap effect: one mask reveals lines through a black rect and white circle, while the other inverts the pattern. The code imports `select` and `range` from D3 to generate the line data, appends rectangles with calculated positions, and applies masks defined as SVG elements to produce the layered visual.

MMatheesha Yapa
87% match