D3 Sol Lewitt

100%

✓ Published0🌍 Public

Last edited May 16, 2024

Created on May 16, 2024

This example generates a geometric composition reminiscent of Sol LeWitt's wall drawings, using a series of horizontal and vertical bands that are selectively revealed through SVG masks. The design employs two distinct masks, each containing a circle, triangle, and rectangle, to create overlapping positive and negative shapes against a full-screen canvas. Built with D3 v7 and rendered as SVG, the code defines shapes using `d3.symbol()` for the triangle path, while the masks apply `url(#circle-mask)` and `url(#circle-mask-2)` to alternating striped rectangles. The result is a dynamic interplay of primary colors in black and white, driven entirely by procedural generation.

AI-generated description

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

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

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-v2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 in a React-free HTML page, rendering with SVG. It shows overlapping horizontal and vertical striped rectangles that create a crosshatch pattern, with circular masks revealing a central circular region where the lines intersect. The visualization uses `d3.select`, `d3.range`, and data joins to generate 100 horizontal and 100 vertical `<rect>` elements, each masked by a dedicated `<mask>` with a circle. The first mask exposes a white circle over black background, while the second inverts the effect, producing contrasting visible and hidden areas. The code demonstrates D3’s data-binding and SVG mask primitives without external data sources, relying entirely on procedural generation.

Ddalia.miliauskaite@me.com

91% match

Loading thumbnail…

Full Sol Lewitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of alternating horizontal and vertical stripes across the full screen. Two masks—one inverted—cut circular symbol shapes from the stripe patterns, creating overlapping geometric forms. The code uses d3.select, d3.range, d3.symbol, and d3.symbols to render SVG paths, with each mask applied via SVG mask elements. The result is a dynamic, screen-filling composition that highlights D3's ability to create intricate generative art from simple primitives.

PPhan Nguyen

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…

D3-Sol-LeWitt--1

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.

AAbdulafeez-okewunmi

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…

Sol Lewitt in D3 part 2

This example recreates Sol Lewitt’s geometric wall drawings using D3.js, rendering 500 horizontal and vertical stripes that overlap through two SVG masks. The code uses `d3.select`, `range`, and `symbol` to generate distinct symbol shapes (like circles and triangles) that act as the mask patterns, revealing or hiding the grid lines. Mask elements are built with `svg.append('mask')` and filled paths, producing layered visual effects of intersecting bands in black and white. The rendering approach uses SVG directly, with dimensions set from `window.innerWidth` and `window.innerHeight`.

Aashutoshc018@gmail.com

90% match