Full Sol LeWitt Reproduction with D3

100%

Full Sol LeWitt Reproduction with D3

✓ Published1🌍 Public

Last edited Mar 24, 2023

Created on Mar 22, 2023

The visualization reproduces a Sol LeWitt art piece by layering horizontal and vertical bar patterns over two sets of symbol-shaped masks. It uses D3 v7 to create an SVG canvas sized to the browser window, with `d3.range` generating 100 bars in each direction, offset by 20-pixel intervals. Two masks, built with `d3.symbol` and SVG `mask` elements, alternate black-and-white fills to reveal the bar intersections, producing a geometric interplay of shapes and lines across the full viewport.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol LeWitt Reproduction with d3

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.

Bbjfmbeck

91% 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

90% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece as a full-screen SVG. It creates 100 horizontal and 100 vertical bars, each with a fill mask, layering them to form a grid. The masks use a circle to reveal a central disk, with the second mask inverting the effect. The piece uses D3's `select`, `range`, and `join` APIs to build the SVG elements and masks.

Gguts

90% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

The example reproduces a Sol LeWitt–style composition using D3 and SVG, where 100 horizontal bars are layered over full-screen masks to create geometric patterns. It renders data generated from `d3.range(n)`, applying mask IDs via `selection.call(renderMask, ...)`. The masks use `d3.symbol` with symbol types from `symbols` to draw white shapes on black or inverted backgrounds, demonstrating D3 v7’s join and selection methods. The SVG output adapts to the viewport dimensions, with no external data source.

MMatheesha Yapa

90% 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

90% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 ()

This example reproduces a Sol LeWitt-inspired piece using D3.js. Vertical and horizontal black bars are generated as SVG rectangles across the full canvas, with a circular mask and a larger irregular star-like symbol mask carving out white negative space in the center. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to define the bar spacing and the vector path for the second mask. Both masks are applied via SVG `<mask>` elements to reveal the intended graphic contrast.

Nnim@brejnholt.dk

90% match

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

90% 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

90% match