Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt with D3

✓ Published0🌍 Public
EEd Smale
Last edited Jul 19, 2023
Created on Jul 16, 2023

This example renders two interlocking sets of green bars—horizontal and vertical—on a full-window SVG canvas. The bars are masked by two overlapping circular shapes created with D3’s `symbol` API, which generates geometric star-like paths. Using D3’s `select`, `range`, and `join` methods, it draws 50 bars in each direction, with the second mask inverted so that only the region outside its circle reveals the vertical bars. The visualization demonstrates how SVG masks and D3’s declarative data joins can combine to produce layered, patterned compositions.

AI-generated description

A demo of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol LeWitt reproduction with D3_2

This visualization reproduces a Sol LeWitt drawing using overlapping vertical and horizontal bars. The bars are drawn as SVG rectangles, with alternating masks creating a visual interplay between the two orientations. The code uses D3.js’s `select`, `range`, `symbol`, and `symbols` APIs to generate the geometric grid and mask patterns. It relies on D3’s SVG rendering with dynamic mask definitions to achieve the layered, cross-hatched effect. The data is procedurally generated rather than sourced from an external dataset.

DDilara Bozkurt
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
89% match
Loading thumbnail…

Sol LeWitt with D3

This example generates a grid of 100 horizontal and vertical bars in SVG using D3’s `select`, `range`, and `join` methods. Two circular masks reveal overlapping patterns: the first shows horizontal bars inside a white circle, while the second inverts the effect for vertical bars. The rendering uses D3 selections to append rectangles and mask elements to the page, creating a Sol LeWitt-inspired geometric composition.

JJetlinZ
89% match
Loading thumbnail…

D3 Sol LeWitt pt2

This example reproduces a Sol LeWitt wall drawing using D3.js and SVG rendering. It displays a grid of horizontal and vertical bars that intersect, with circular masks applied to create a rounded viewing window in the center of the canvas. The code uses D3’s `select`, `range`, and `join` APIs to generate the rect elements, and constructs two SVG masks—one with a white circle on black and another with a black circle on white—to reveal and conceal portions of the bars. The visualization fills the entire browser window, with the bars spaced at 20-pixel intervals.

AArturo Guevara
89% match
Loading thumbnail…

Full Sol Lewitt whit D3

This example reproduces a Sol LeWitt wall drawing using D3.js. It shows a grid of horizontal and vertical bars intersecting to form a circular emblem at the center, created by masking the bars with a geometric symbol path. The SVG rendering uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate and mask the rectangular bar elements. Two separate mask groups define the circular shape, with one mask inverting the fill to combine the bars into a single composed form.

FFrancisco Ibelles
89% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

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.

Xxinyuwangxyw
88% match
Loading thumbnail…

Full Sol Le Witt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 and SVG masks. It displays a grid of horizontal and vertical bars, with a central circular region where the two sets of bars visually intersect and invert their colors. The code uses D3 selections with `range` and `join` to generate 100 rectangles in each orientation, and defines two SVG masks with `circle` elements to control which bars are visible. The final image resembles a minimalist bar chart filtered through a circular aperture.

AAmauri Ribeiro
88% match
Loading thumbnail…

Sol Lewitt Variant with D3 with Groups

This interactive SVG artwork reproduces a Sol LeWitt-inspired geometric composition using D3.js. Two perpendicular sets of thin rectangular bars—one horizontal, one vertical—overlap across the full canvas, their visibility controlled by two circular masks in the center. The first mask isolates a white circle, revealing only the horizontal bars within it, while the second mask uses inverse logic to show vertical bars outside the circle. The code employs D3's `select` and `range` utilities to generate the bar arrays and `join('rect')` to efficiently create the SVG elements, with masks constructed directly via the DOM API.

Iibaird6@gatech.edu
88% match