Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt Reproduction with d3

✓ Published1🌍 Public
Bbjfmbeck
Last edited Mar 8, 2023
Created on Mar 8, 2023

This piece reproduces a Sol LeWitt art work as a full-screen SVG using D3.js version 6.6.1. It shows a grid of overlapping black vertical and horizontal bars, which are created by appending `rect` elements to two groups, each masked to partially hide the lines. The `renderMask` function uses D3’s `symbol` and `symbols` API to draw a large circular path within each mask, with inverted fill colors to selectively reveal or conceal the grid, producing a dynamic, layered composition without user interaction.

AI-generated description

A reproduction of a Sol LeWitt art piece.

YouTube link

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical lines that intersect to form a subtle pattern across the full browser viewport. The piece relies on two SVG masks—one circular and one rectangular—to selectively reveal or hide portions of the line arrays. Specifically, a path generated via `symbol(symbols[1],100000)` creates a large circular mask over the vertical lines, while a black circle mask obscures the horizontal lines in a contrasting region. The code uses D3’s `select`, `range`, and `join` APIs to efficiently append hundreds of SVG rect elements, with all rendering performed client-side in SVG format.

Gguts
93% match
Loading thumbnail…

Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a full-screen SVG grid of overlapping horizontal and vertical bars. Two distinct masks, created with inverted black-and-white shapes from D3’s `symbol` API, selectively reveal or hide portions of the grid, producing layered, intersecting patterns. The code uses D3’s `select`, `range`, and `join` methods to efficiently generate and update the 100 rectangles per orientation, while the `mask` elements dynamically apply the symbolic clipping paths. The final visualization is a clean, generative art piece driven entirely by SVG and D3’s declarative API.

Jjmetzg11alpine
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

A full-screen SVG reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical lines, each line of constant width and separated by a fixed interval. D3’s `select`, `range`, `symbols`, and `symbol` APIs generate the line structure, while mask elements, created via the `renderMask` function, define cutout shapes—a circle and other geometric symbols—through which the lines are visible. The masks use fill colors to either hide or reveal lines, producing an inverted visual effect across the composition.

MMofizur Rahman
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3.js

This example reproduces a Sol LeWitt art piece using D3.js and SVG. It generates a grid of horizontal and vertical rectangles, then applies two masks that shape the visible pattern. The masks are created with D3’s `symbol` and `symbols` APIs, placing geometric symbols in alternating black-and-white fills to selectively hide or reveal parts of the grid. The code uses `select`, `range`, and `.join()` to efficiently render the elements, with the rendering confined to the full browser viewport.

MMarcus Vinicius da Silveira Richa
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js. It shows a grid of horizontal and vertical lines rendered as SVG rectangles, with the pattern dynamically clipped by two circular masks to create a complex, layered composition. The code uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate the shapes and paths. SVG masks are defined and applied to the line groups, with one mask inverted to produce the final visual effect. The rendering adapts to the browser window’s dimensions.

Aajoua
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js to generate a grid of intersecting horizontal and vertical lines across the full browser window. The rendering uses SVG rectangles, with each line composed of multiple thin rect elements spaced at regular intervals. Two SVG masks, created with D3’s `symbol` and `symbols[1]` (a circle), selectively reveal or hide parts of the grid: one mask is inverted to show lines only within the circle, while the other hides them inside it. The code relies on `d3.select`, `range`, and `join` to build the elements dynamically.

XXuân Vinh
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a full Sol LeWitt art piece using D3, displaying a grid of horizontal and vertical stripes that are selectively masked by geometric symbols. The artwork shows alternating bands of lines, with the vertical stripes masked by filled shapes and the horizontal stripes partially obscured. The code uses D3’s `select`, `range`, and `symbols` APIs to generate SVG rectangles and mask paths, rendering 100 lines in each direction across the full browser window. Two separate masks apply contrasting white and black fills to create the overlapping pattern effect.

PPareel Amre
92% match
Loading thumbnail…

Full Sol LeWitt Piece Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate SVG shapes. It layers horizontal and vertical striped rectangles, each filtered by a separate mask. The masks are built from alternating black and white bands containing geometric symbols, such as arcs and lines, drawn with the `symbol` and `symbols` APIs. By inverting the mask colors, the piece creates intersecting patterns across the full browser window, with the rendering using D3’s `select`, `range`, and `join` methods for efficient SVG construction.

MMika Kutila
92% match