Fork of Fork of Sol LeWitt with d3js 2

100%

Fork of Fork of Sol LeWitt with d3js 2

✓ Published1🌍 Public

Last edited Jan 23, 2023

Created on Jan 23, 2023

Forked from Fork of Sol LeWitt with d3js

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.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

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

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 with d3js

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.

Iinnocent thomas

92% match

Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt–style grid of horizontal and vertical lines, overlaid with two masks that reveal symbolic shapes in contrasting areas. The example uses D3 v6 to generate 100 rectangular strips in each direction, then applies SVG masks via `d3.select` and `append('mask')`. Each mask uses D3 symbol generators (`d3.symbol` and `d3.symbols`) to draw numbered geometric icons—circles, crosses, diamonds, and squares—in black or white, creating a layered optical effect. The code directly manipulates SVG elements and relies on the `range`, `join`, and `attr` APIs to build the repeating structure.

AAlpineStranger

91% match

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction Final with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical black lines layered over the full viewport. The lines are clipped by two circular masks centered on the screen, creating a crosshatched pattern that fades into blank space beyond the circle boundaries. The code uses D3 selections and the `join` pattern to append SVG `rect` elements, with `mask` elements defining the visible regions via white and black circles. The artwork is rendered entirely in SVG using D3 v7.

Kkwambokar

90% match

Loading thumbnail…

Fork of Fork of For of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, rendering a grid of horizontal and vertical SVG rectangles overlaid with two circular masks. The first mask creates a circular hole in the center of the horizontal lines, while the second mask reverses the effect, leaving a solid circle in the middle of the vertical lines. The code uses `d3.select`, `d3.range`, and the `.join()` method to construct the SVG elements, with masks defined via `append('mask')` and composed of `rect` and `circle` shapes.

Rroyable88

90% match

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

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6 and SVG rendering. The visualization shows a grid of horizontal and vertical rectangles, with two circular masks creating a layered geometric pattern where the lines alternate visibility. The code employs `d3.select`, `d3.range`, and the `join` method to generate 100 rect elements for each orientation. SVG masks—defined with distinct IDs and circles of white and black fills—control which line segments appear within the overlapping circular regions.

PPeter Prevos

90% match