Skip to main content
SimilarExport ZIP
100%

sol_lewitt_test_with_D3

✓ Published1🌍 Public
Ggaudi84
Last edited Oct 31, 2022
Created on Oct 31, 2022
Forked from sol_lewitt_test

This example renders a generative geometric composition inspired by Sol LeWitt, using D3.js to create intersecting grids of thin horizontal and vertical rectangles. A circular mask, defined with SVG `mask` elements and `circle` shapes, reveals the grid pattern in the center while hiding it elsewhere. The code uses `select`, `range`, and `join` from D3 to efficiently generate and bind data to SVG `rect` elements, with the second mask inverting the visibility to produce a layered effect. The visualization fills the browser window and updates with the viewport size.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt with D3

This example recreates a Sol LeWitt–inspired geometric drawing using D3.js. It displays 100 horizontal and 100 vertical rectangles that intersect within two circular masks, producing a crosshatched pattern confined to circular regions. The visualization uses D3’s `select`, `range`, and data joins to bind arrays of indices to SVG `rect` elements. Masking is implemented with two SVG `mask` definitions, each combining a full-canvas rectangle with a circle, to alternately reveal or hide the grid lines.

Llukasreber
91% match
Loading thumbnail…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing using D3.js to generate SVG shapes. It displays a grid of horizontal and vertical rectangles that are partially masked by overlapping circular regions, creating geometric intersections. The code constructs an SVG canvas sized to the browser window, then uses D3’s `select`, `append`, and `attr` methods to add and position the rectangles. Although the data array is currently empty, the logic prepares to map a sequence of marks with varying y-offsets and mask references, demonstrating how D3 can drive generative art through declarative joins and SVG masks.

Ssirenajbpearl@gmail.com
91% match
Loading thumbnail…

full_sol_lewitt_test_with_D3

This example generates an abstract geometric composition inspired by Sol LeWitt using D3.js, rendering horizontally and vertically striped rectangles across the full browser window. It employs SVG masks with `d3.symbol` and `d3.range` to create two distinct mask patterns—one containing the seven symbol types and another with a duplicated symbol—which selectively reveal the layered line grids. The `select`, `append`, and `join` APIs structure the SVG elements, while the `call` method applies the mask-rendering functions. The code uses D3 version 6.6.1 and dynamically sizes the output to the viewport.

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

Sol Lewitt D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js to render SVG rectangles in a browser. It shows a grid of alternating vertical and horizontal bars that are masked to create a circular focal point, with bars inside the circle appearing inverted relative to those outside. The code uses D3’s `select` and `range` APIs to generate and join the rectangles, while custom SVG masks (`circle-mask` and `circle-cutout-mask`) control visibility. The visualization resizes to the full window and uses only the built-in D3 library (v6.6.1).

Ppirani.sabah@gmail.com
91% 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
90% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7. It renders a grid of alternating horizontal and vertical SVG rectangles that are masked to reveal a circular viewing window at the center of the page. The code uses `d3.select` and `d3.range` to generate 100 rect elements per direction, with two distinct SVG masks (`circle-mask` and `circle-mask2`) that control visibility by combining black and white fill shapes. The visualization is entirely procedural, with no external data source, and adapts to the full browser viewport.

PPetrescu Alexandru
90% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, showing intersecting horizontal and vertical line patterns constrained by two circular masks. It demonstrates how SVG mask elements can create layered visual effects with geometric precision. The code uses D3 selections with `join('rect')` to bind 100 data points from `range(n)`, while two distinct mask groups apply inverted black-and-white circles to reveal the gridlines. The visualization renders as an SVG using dynamic width and height based on the window size.

OOleg Zhernovoy
90% match