Fork of Sol LeWitt with d3js

100%

Fork of Sol LeWitt with d3js

✓ Published1🌍 Public

Last edited Jan 23, 2023

Created on Jan 22, 2023

This visualization generates a grid of horizontal and vertical SVG rectangles that collectively form a geometric pattern inspired by Sol LeWitt’s minimal art. The code uses d3’s `select` and `range` to create 100 lines in each direction, then applies two circular masks to reveal or hide portions of the grid, producing a layered, cross-shaped effect. The rendering relies on SVG masks and fills, with the viewport sized to the full window.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate a grid-like pattern of horizontal and vertical lines. The lines are rendered as SVG rectangles, with two circular masks applied to create a central circular viewing window. The horizontal bars are masked by a black rect with a white circle, while the vertical bars use an inverse mask, producing a crosshatched effect within the circle. The code uses d3-selection’s `select`, `append`, and `join` methods alongside `range` to efficiently create the marks.

Iibrarmunircoder

93% match

Loading thumbnail…

Fork of Fork of Sol LeWitt with d3

This example generates a grid of thin horizontal and vertical lines using D3’s `select`, `range`, and `join` methods, rendered as SVG rectangles across the full browser viewport. Two circular masks invert the visibility of each set of lines: the first hides everything outside a 200-pixel circle centered on the screen, while the second hides everything inside its circle. The result juxtaposes a solid disk of vertical strips against an outer field of horizontal strips, creating a Sol LeWitt-inspired geometric pattern. The code runs in React and relies on D3 v7 for data binding and SVG manipulation.

Mmax-31

92% match

Loading thumbnail…

Fork of Sol LeWitt w/ D3

A grid of thin horizontal and vertical white lines is drawn across a black canvas, intersecting to form a dense woven pattern. Two circular masks selectively reveal the grid: one centered rectangle masks the horizontal lines, while an inverted mask reveals the vertical lines, creating a layered, offset visual effect reminiscent of Sol LeWitt’s geometric art. The example uses D3 v7’s `select`, `range`, `symbol`, and `symbols` APIs to generate the lines and SVG masks programmatically.

Ddanheavern

92% match

Loading thumbnail…

Fork of Fork of Sol LeWitt with d3js 2

A grid of alternating horizontal and vertical black lines is masked so that only a circular area is visible. The example uses D3 v6 to generate SVG rectangles with `selectAll`, `data`, and `join`, and applies two SVG masks to invert the visibility pattern. `d3.range` creates the sequence for positioning, while masks define a central circle where lines appear or disappear.

Iinnocent thomas

92% match

Loading thumbnail…

Fork of Sol LeWitt with d3

This example reinterprets Sol LeWitt’s geometric wall drawings as a generative SVG composition. The view shows a grid of horizontal and vertical stripes, each rendered as a series of `rect` elements, clipped by two circular masks that create a central lens effect. Using d3’s `select`, `range`, and `.join()`, the code creates 48 stripes in each direction across the full window width and height. One mask reveals the horizontal pattern within the circle, while an inverted mask shows the vertical pattern outside it, blending the two orientations.

Mmax-31

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, rendering 100 horizontal and 100 vertical rectangles as SVG elements. The rectangles are masked to reveal only a circular region at the center of the canvas, creating an overlapping grid pattern reminiscent of the original work. The code uses D3’s `select`, `range`, and `join` methods to bind data and generate the SVG shapes, with two `mask` definitions controlling the visibility of the crossing bars.

DDyor69

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, displaying a grid of alternating horizontal and vertical striped lines across the full browser window. Two SVG masks reveal the grid through circular and geometric shapes, while the second mask incorporates D3 symbol shapes and checkerboard patterns within its design. The code uses D3 v7 APIs including `select`, `range`, `symbol`, and `symbols` to generate the SVG elements, with mask composition controling which portions of the line grid remain visible.

AAngie Va. Moreno

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, rendering 100 horizontal and 100 vertical striped rectangles in an SVG canvas. The artwork uses two circular mask patterns—one with a black background and white circle, another with inverted colors—to create intersecting circular cutouts where the lines cross. The code uses D3's `select`, `range`, and `join` APIs to efficiently generate and position the rect elements, with the masks applied via SVG `mask` attributes to achieve the geometric composition.

Jjctmercado

91% match