Full Sol Lewitt D3 changing rect dir

100%

Full Sol Lewitt D3 changing rect dir

✓ Published0🌍 Public

Last edited Nov 18, 2024

Created on Nov 18, 2024

This example, built with D3.js (version 6.6.1), dynamically generates a Sol LeWitt-inspired drawing of alternating vertical and horizontal black rectangles. The code uses D3's `select`, `range`, `symbols`, and `symbol` APIs to construct SVG elements and masks. It creates two layers of rectangles, each masked by a group of three geometric symbols (like circles or squares), producing a complex, intersecting pattern. The rectangles are generated programmatically based on screen dimensions, with mask shapes positioned horizontally across the canvas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol Lewitt D3

This example uses D3’s selection and join API to create a grid of black rectangles overlaid with geometric shapes. Solid black bars are drawn repeatedly, masked by a set of white star-like symbols, while a second mask inverts the shapes to create a cutout effect. The code relies on `d3.select`, `d3.range`, `d3.symbol`, and SVG `mask` elements, with rectangle positions computed from screen width and thickness. The rendering is entirely SVG, driven by JavaScript that calculates layout from `window.innerWidth` and `window.innerHeight`.

Ppirani.sabah@gmail.com

89% match

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style drawing using D3.js, rendering two sets of horizontal and vertical striped rectangles that intersect within circular masks on an SVG canvas. The code generates 100 of each rectangle type, with the first mask revealing a solid circle and the second inverting the pattern, creating a layered geometric contrast. It uses D3’s `select` and `range` functions from version 6.6.1 to build the SVG dynamically, positioning elements based on window dimensions.

Aainhoadieruiz@gmail.com

89% match

Loading thumbnail…

Full Sol Lewitt Reproduction with D3-excercise

This example reproduces a Sol LeWitt-inspired geometric composition using D3 to generate layered SVG elements. It draws horizontal and vertical rectangles across the full window, applying SVG masks that contain seven distinct path symbols—such as circles, crosses, and diamonds—from the `d3.symbol` API. A mask is also inverted for one layer, creating contrast. The code uses D3 selections, `range`, and `join` to efficiently bind data and render the repetitive pattern.

Yyejichun@naver.com

89% match

Loading thumbnail…

Full Sol Lewitt with D3

This example generates a full-screen SVG pattern of alternating horizontal and vertical stripes, with Sol Lewitt-inspired geometric symbols appearing through mask cutouts. Two separate mask layers—each containing a row of D3 symbol shapes—reveal or hide the stripe groups to create layered, interlocking compositions. The visualization uses D3 v6 APIs including `select`, `range`, `symbol`, and `symbols`, with masks defined via `append('mask')` and filled using `rect` and `path` elements. Data is procedurally generated with `range(n)` rather than loaded from an external source.

AAlp

88% match

Loading thumbnail…

Full Sol Lewitt with D3

This example generates two sets of alternating horizontal and vertical stripes from `d3.range` and renders them as SVG `rect` elements. Each set is clipped by a circular `mask` whose pattern is created from the `d3.symbols` and `d3.symbol` functions, producing a repeated geometric motif. The masks use contrasting fills—black for the first circle and white for the second—so the overlapping stripes appear to weave through the two shapes. The visualization runs entirely in the browser with D3 7.4.4, drawing to an SVG canvas sized by the window height.

TTirth Trivedi

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

88% match

Loading thumbnail…

SOL Lewitt with D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js version 7.8.5. It displays a grid of horizontal and vertical striped rectangles that form a circular mask pattern at the center of the screen, rendered as SVG. The code builds the visualization with `select`, `range`, and `.join('rect')`, layering two sets of rectangles and applying SVG `<mask>` elements to create the intersecting shapes.

DDonald Bagwell

88% match

Loading thumbnail…

Full Sol Lewitt Reproduction with d3

This example reproduces a Sol LeWitt wall drawing as a full-screen SVG. It uses D3's `select`, `range`, and `join` APIs to generate a grid of alternating horizontal and vertical stripes. Two masks, created with `symbol` and `symbols` from D3, overlay the grid: one applies a white-on-black path pattern, the other inverts it, producing a layered geometric composition. The drawing adapts to the browser window's dimensions, with the mask symbols centered and scaled to a fixed size.

VVincent Leduc

88% match