Skip to main content
SimilarExport ZIP
100%

LeWitt art with lines in d3

✓ Published0🌍 Public
AAkbarjon
Last edited May 19, 2022
Created on May 19, 2022

This example reproduces a Sol LeWitt-inspired art piece by generating a randomized grid of connecting lines across the full browser window. The visualization uses D3 v7 with SVG rendering, where the code creates an array of 36 random coordinates and iterates through nested loops to draw white lines between each pair of points. The `select`, `range`, and `join` methods from D3’s selection module manage the SVG elements, while the black background and random point placement create a dense, abstract geometric pattern.

AI-generated description

a reproduction of a sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

LeWitt Recreation w/ D3

This example recreates a Sol LeWitt-style geometric drawing using D3.js v7 and SVG rendering. It displays a grid of horizontal and vertical black bars overlaid on a full-window canvas, with a circular mask creating a central void. The code uses D3's `select`, `range`, and `join` to generate 100 rect elements in each orientation, while SVG `mask` elements with white and black shapes define the visible regions. The result is a minimalist pattern that demonstrates simple masking and data-driven shape generation.

MMarvin Frede
85% match
Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of intersecting horizontal and vertical rectangles as SVG elements. The artwork shows a dense cross-hatch pattern that gradually disappears within a central circular region, creating a stark contrast between the outer textured area and the empty circle. The code generates 100 lines in each direction using `d3.range` and `selectAll(...).join('rect')`, then applies two SVG masks (`inner-mask` and `outer-mask`) to selectively reveal or hide the lines. The piece scales to the full browser window size.

AAngela Kochoska
84% match
Loading thumbnail…

Sol LeWitt in d3

This example recreates Sol LeWitt’s geometric wall drawings using D3 v5, rendering a grid of horizontal and vertical black rectangles on an SVG canvas. The code employs the `select` and `range` functions from D3 to generate 100 line segments in each direction, while two SVG masks—each containing a white circle—reveal only the portions of the rectangles that fall within the circular boundaries. The visualization uses `join` to efficiently build the rectangles and applies the masks via the `mask` attribute, producing intersecting line patterns that interact with the circular cutouts.

TTobi Olabode
84% match
Loading thumbnail…

Sol LeWitt Reproduction (D3)

This example reproduces a Sol LeWitt-style wall drawing using D3.js, generating a grid of black vertical and horizontal lines across the full browser window. The code computes line positions from fixed gaps between margins, creating 18 vertical and 9 horizontal lines with red strokes on the vertical set. It renders as SVG via D3 selections and the `join()` method, using `d3.range`-like loops and data arrays built from `window.innerWidth` and `innerHeight`. No external dataset is loaded; the drawing is purely generative.

AAlpineStranger
84% 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
83% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6. It displays a grid of vertical and horizontal striped rectangles overlaid with two circular masks, creating intersecting line patterns. The visualization uses `d3.select`, `d3.range`, and the `join` pattern to generate 100 SVG rectangle elements in each direction. Two SVG masks, each containing a black or white circle, selectively reveal or hide portions of the stripes, producing the geometric contrast characteristic of LeWitt’s work. The SVG fills the entire browser window.

AAndre J Denais
83% match
Loading thumbnail…

LeWitt Art With Triangle in D3

This example reproduces a Sol LeWitt-inspired piece using D3 v7, rendering an SVG that fills the browser window with a grid of vertical and horizontal black stripes. The stripes are generated from two sets of 100 rectangles, and a large triangle symbol is used as a mask to create the artwork's central geometric cutout. The code uses `d3.select` to append the SVG, `d3.range` to generate the stripe data, and `d3.symbol` with `d3.symbolTriangle` to create the triangle path applied through SVG masks, producing the layered visual effect.

AAkbarjon
83% match
Loading thumbnail…

recreate LeWitt art

This visualization recreates a Sol LeWitt-style geometric drawing using nested SVG masks to create an intersecting grid of vertical and horizontal bars. The code generates 100 thin vertical rectangles and 100 horizontal rectangles, each offset by 20 pixels, with two circular masks applied to reveal a central circular window where the bars remain visible. Built with D3.js (using `select`, `range`, and `join`), the SVG masks use white and black fills to selectively show or hide the rectilinear pattern. The final piece presents a clean, minimalist composition of repeating lines interrupted by a smooth circular void.

AAkbarjon
83% match