D3-Sol-LeWitt--1

100%

D3-Sol-LeWitt--1

✓ Published1🌍 Public

Last edited Jun 2, 2023

Created on Jun 1, 2023

This example generates an abstract geometric composition inspired by Sol LeWitt, rendered as SVG. It creates a grid of horizontal and vertical stripes across the full window, then applies two circular masks with a star-shaped symbol from the d3 library. The masks use boolean-like inversion, alternating black and white fills to create contrast between the masked regions. The code uses d3’s `select`, `range`, `symbol`, and `symbols` APIs, and builds the visualization procedurally with no external data source.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

D3-Sol-LeWitt

This example pays homage to Sol LeWitt by using D3.js to generate a grid of horizontal and vertical rectangles, which are only visible within the intersection of two circular masks. The visualization renders 100 stripes in each direction, with the SVG `mask` elements defining a central circle that reveals the grid against a contrasting background. The code uses D3’s `select` and `range` to create the rectangles and applies the masks for a layered, geometric effect.

AAbdulafeez-okewunmi

92% match

Loading thumbnail…

D3 Sol LeWitt

This example generates a geometric abstraction inspired by Sol LeWitt using D3.js and SVG rendering. It draws 100 horizontal and vertical lines across the full canvas, with each line masked to create circular forms. The horizontal lines use a mask that reveals a white circle, while the vertical lines use an inverted mask that hides the same circle, resulting in a composition of overlapping striped bands and a central circular void. The code uses D3's `select`, `append`, and `range` functions to construct the SVG elements.

JJMeltzer92

91% match

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js in a React application, rendered as SVG. It shows a grid of horizontal and vertical rectangles that are partially revealed through two circular masks, creating an intersecting crosshatch pattern. The code uses `d3.select` and `d3.range` to generate 100 stripes in each direction, with alternating fills applied via SVG `mask` elements. Two separate masks—one inverting the circle’s effect—control visibility, producing a dynamic interplay between the grid lines and the central circular reveal. The visualization runs full-window, adapting to the viewport dimensions.

Ddalia.miliauskaite@me.com

91% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js and SVG. It displays a grid of vertical and horizontal rectangles overlaid with two masks that reveal alternating symbol shapes—including circles, crosses, and diamonds—arranged horizontally across the canvas. The code imports `select`, `range`, `symbols`, and `symbol` from D3 to generate the shapes and masks, rendering 100 rectangles per axis at 20-pixel intervals. The visualization uses the D3 `range` and `join` methods to bind data, with mask rectangles toggling between white and black fills to create the interlocking pattern.

Aabhineetsingh10

91% match

Loading thumbnail…

Full Sol LeWitt D3

This example creates a grid of horizontal and vertical stripes whose visibility is selectively revealed through two SVG masks, positioned over symbol-shaped cutouts. The mask pattern is generated using D3’s `range` and `symbol` APIs, alternating between normal and inverted masks to produce a complementary crossover effect. The visualization renders entirely with SVG, using dynamic `mask` URLs applied to each rectangle. The code leverages D3 v7 selections, joins, and the `symbol` generator to construct geometric shapes across the full viewport.

JJamie

90% match

Loading thumbnail…

Sol LeWitt With D3

This example recreates a Sol LeWitt wall drawing using D3.js to render layered geometric abstractions in SVG. The visualization combines horizontal and vertical striped rectangles with concentric arc paths, all filtered through SVG masks that selectively reveal or hide portions of each shape across the viewport. The code uses D3 selections with `range()` to generate repeated elements, `.join()` for data binding, and `mask` attributes to composite intersecting forms. The result is a dynamic, generative composition that responds to the browser window dimensions while echoing LeWitt’s systematic, rule-based artistic style.

Jjony6290

90% match

Loading thumbnail…

Full Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3 to generate SVG shapes. Alternating vertical and horizontal striped rectangles are layered beneath two masks, creating a geometric composition where the pattern changes across the canvas. Each mask contains alternating black and white regions with D3 symbol paths—including circles, crosses, and diamonds—positioned at intervals. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to build the visualization, with the masks inverted relative to each other for a contrasting effect.

MMatthew Bruffey

90% match

Loading thumbnail…

D3 Sol LeWitt 2

This visualization generates an abstract grid of horizontal and vertical stripes across the full browser window, inspired by Sol LeWitt’s geometric wall drawings. Two sets of one hundred rectangles each create the striped pattern, with each set filtered through a separate SVG mask. The masks incorporate D3’s `symbol` shapes—including circles, diamonds, and squares—positioned via `d3.range` and `selectAll().join()`. Using D3 v7 with a React setup, the code renders entirely as SVG, with masking inverted between the two layers to produce intersecting geometric cutouts.

JJMeltzer92

90% match