LeWitt Art With Triangle in D3

100%

LeWitt Art With Triangle in D3

✓ Published1🌍 Public

Last edited May 17, 2022

Created on May 17, 2022

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.

AI-generated description

a reproduction of a sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt

This example generates three full-screen SVG compositions of overlapping horizontal and vertical striped rectangles, each masked into a distinct geometric shape: a circle, a triangle, and a rectangle. Using D3 v7, it constructs 100 thin bars per axis and applies SVG masks to reveal only the portions inside each shape. The code combines D3’s selection and join methods with custom mask definitions and symbol paths, such as `d3.symbolTriangle`, to render the layered patterns in the browser.

Aadonisacruz0@gmail.com

86% match

Loading thumbnail…

LeWitt with D3

Inspired by Sol LeWitt’s geometric wall drawings, this SVG visualization uses D3 to layer horizontal and vertical striped rectangles over each other. Two masks—one inverted—reveal and hide sections of the grid using D3’s `symbol` shapes (such as circles and crosses) as cutouts. Built with React and D3 v6, the code generates 200 stripes per direction and positions symbols across the canvas to create intersecting patterns.

Ggrassfluffy02

85% match

Loading thumbnail…

LeWitt Art With Multiple Shapes in function in D3

This example reproduces a Sol LeWitt–style generative artwork by layering two sets of thin rectangular strips—vertical and horizontal—across the full viewport. Each set is masked using an SVG `<mask>` element, with the masks populated by D3 symbols (from `d3.symbol` and `symbols`) positioned in a row, alternating fill colors to create intersecting geometric patterns. The code uses `select`, `range`, and `join` from D3 v7 to bind data and render both the rectangles and the mask shapes dynamically.

AAkbarjon

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

85% match

Loading thumbnail…

Full Sol Lewitt Reproduction with D3-2

This example reproduces a Sol LeWitt art piece using D3 version 6.6.1 with SVG rendering. It displays a grid of horizontal and vertical striped rectangles, overlaid with two masks that reveal or hide the stripes using D3’s `symbol` shapes. The code uses `select`, `range`, `symbols`, and `symbol` to generate mask patterns, and applies them via `attr('mask', ...)` to create the visual effect.

Yyejichun@naver.com

85% match

Loading thumbnail…

LeWitt Repr with D3

This example uses D3 v3 to recreate Sol LeWitt’s geometric wall drawings as an interactive SVG. Two alternating stripe patterns—horizontal and vertical—are clipped by two masks, each divided into alternating black-and-white bands. Within each band, a different D3 symbol (from `d3.symbols`) appears in the inverted color, creating a shifting mosaic of shapes and lines. The SVG scales to the full window, and a CSS `:hover` rule slowly transitions the page background to green over three seconds.

CCaroline Ghisolfi

84% match

Loading thumbnail…

D3 - LeWitt Full

This example uses D3 (version 7) to generate an abstract geometric composition inspired by Sol LeWitt. Horizontal and vertical striped rectangles are layered and masked by a central diamond shape, created with the `symbol` API. Two SVG masks—one inverted—control which stripes appear inside versus outside the diamond, producing a cross-hatched visual effect. The rendering is purely computational, using `range`, `join`, and SVG elements without any external data source.

Ttomasnihlen

84% match

Loading thumbnail…

D3 Sol LeWitt

This example reproduces a Sol LeWitt art piece using D3 v3 and SVG. It renders a grid of 100 horizontal and 100 vertical rectangles, each 10 pixels thick and spaced 20 pixels apart, covering the full window. Two SVG masks define a central circular aperture: the first mask reveals horizontal stripes inside the circle, while the second reveals vertical stripes outside it, creating a contrasting geometric pattern. The code uses `d3.select`, `d3.range`, and chained `.attr` calls to generate the shapes, with data bounds derived from the window dimensions.

AArturo Guevara

84% match