Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt Reproduction in D3 - Javan

✓ Published1🌍 Public
JJavan Friedel
Last edited Jun 16, 2022
Created on Jun 16, 2022

This example reproduces a Sol LeWitt art piece using D3’s SVG rendering. It displays two sets of overlaid horizontal and vertical striped rectangles, masked to reveal a diamond shape in the center and a circular cutout, creating layered geometric patterns. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate the shapes, applies SVG masks via `mask` elements, and sizes the artwork to the full window dimensions.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction in D3 - Javan

This example recreates a Sol LeWitt-inspired geometric composition using D3.js and SVG rendering. It displays a grid of thin horizontal and vertical rectangles layered over each other, with two circular masks creating intersecting circular cutouts that reveal or hide portions of the rectangles. The code uses D3 selections, `range()` for data generation, and `.join()` to bind 100 rectangles per axis to the SVG. The `mask` element defines the circular regions, with one mask using a white circle on black and the other using a black circle on white.

JJavan Friedel
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, generating a grid of thin horizontal and vertical rectangles that overlap across the full browser window. The composition uses SVG masks to create alternating visibility: one mask reveals a central diamond shape against a black background, while the other inverts the pattern with a white background. The code leverages D3’s `select`, `range`, and `join` to append rectangles, and `symbol` with `symbols` to define the diamond mask paths. Rendering is SVG-based, with masks applied via the `mask` element.

Jjajinkya
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 v7 and SVG rendering. It creates two overlapping sets of horizontal and vertical striped rectangles, each clipped by a circular mask with inverted fill patterns to produce intersecting geometric shapes. The code uses `d3.select`, `d3.range`, and `d3.symbol` with `symbols[1]` to generate the mask paths, while `selection.append` and `selection.join` build the 100 rectangles per axis across the full viewport.

JJuan Corrales Correyero
91% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction in D3 - Javan

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of horizontal and vertical stripes, with geometric symbols cut out through SVG masks. The code creates 100 rectangular bands in each direction, then applies two complementary masks—one with dark symbols on a light background, the other inverted—to reveal layered patterns. The visualization uses D3’s `select`, `range`, `symbol` and `symbols` APIs, along with SVG `<mask>` elements, to compose the artwork across the full browser window.

JJavan Friedel
91% 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
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawings using D3 v3 and SVG, rendering a grid of horizontal and vertical stripes overlaid with two masks. The masks, created with SVG `<mask>` elements, cut out shapes from the stripes using D3 symbols such as circles, diamonds, and triangles. One mask inverts its fill to alternate visible and hidden symbol areas. The code leverages `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate the pattern dynamically at full window size.

SSami Friedrich
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing using overlapping horizontal and vertical striped rectangles, masked to reveal a white diamond shape at the center and a black circle behind it. The visualization is rendered as an SVG using D3 v7, leveraging `select`, `range`, `join`, and `symbol` APIs to generate the grid of lines. Two masks (`circle-mask` and `circle-mask2`) combine the shapes, with the horizontal bars visible through the diamond and vertical bars elsewhere. The code imports from `d3` and appends elements to the body, adapting to the full window size.

Lliu yang
91% match