Skip to main content
SimilarExport ZIP
100%

Sol lewitt reproduction with D3 JVK

✓ Published1🌍 Public
Kkakkanadjoy@yahoo.com
Last edited Dec 18, 2024
Created on Dec 18, 2024

This example reproduces a Sol Lewitt wall drawing using D3.js version 7.9.0 and SVG rendering. It displays a grid of alternating horizontal and vertical striped rectangles, where two circular masks reveal the intersecting lines. The code uses `d3.range` to generate 100 indices for positioning the stripes, and the D3 selection API (`select`, `append`, `attr`, `data`, `join`) to build the SVG structure and apply the mask definitions. The masks are constructed with black and white circles and rectangles to selectively show or hide portions of the line patterns.

AI-generated description

A Sol Lewitt ReproductionSol Lewitt art piece

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol lewitt reproduction with D3 - not using class JVK

This example reproduces a Sol LeWitt-inspired grid of horizontal and vertical stripes, clipped by two circular masks to reveal a central intersection. Built with D3.js 7.9.0 and rendered as an SVG, it uses the `select`, `range`, and `join` APIs to generate 100 rectangles along each axis. The first mask blacks out a circle over the full frame, while the second inverts the mask to highlight the crossing bands. The visualization demonstrates D3’s declarative SVG construction and mask-based clipping techniques.

Kkakkanadjoy@yahoo.com
94% match
Loading thumbnail…

Full Sol lewitt reproduction with D3 - not using class JVK

This example reproduces part of a Sol LeWitt wall drawing using only D3.js (version 7.9.0) and SVG, without relying on any external class. The artwork displays a grid of alternating horizontal and vertical thin white lines whose visibility is masked by two shapes: a large circular gradient-like cutout and a smaller solid black circle, producing layered geometric effects. The code builds the line grid using `d3.range` and `join` operations, then creates `mask` elements with paths and circles to selectively reveal the strokes. Rendering is performed entirely in the browser with SVG, adapting to the full window size.

Kkakkanadjoy@yahoo.com
93% match
Loading thumbnail…

Full Sol lewitt reproduction with D3 - exercise

This example reproduces a Sol LeWitt-style wall drawing using D3.js, rendered as an SVG of alternating horizontal and vertical grid lines. Two mask layers, each containing a different geometric symbol from D3’s symbol generator, selectively reveal or hide portions of the grid. The first mask is inverted to expose lines through one set of shapes, while the second uses a complementary fill to display the remaining pattern. The code relies on `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct the composition dynamically.

Kkakkanadjoy@yahoo.com
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, building an SVG scene with horizontal and vertical rectilinear bands. The code creates 100 horizontal stripes, each 10 pixels tall, and applies an SVG circular mask to reveal a circular cutout. A second complementary mask isolates a circular region for vertical stripes, creating an intersecting pattern. Rendered entirely through SVG elements, the piece uses D3’s `select` and chained `append`/`attr` methods for DOM construction, with data driven by a simple loop. The visualization fills the browser window, reflecting the code’s dependence on `window.innerWidth` and `window.innerHeight`.

JJinpeng Li
91% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using SVG masks and layered rectangles in D3 v7. It shows two sets of alternating horizontal and vertical stripes, each confined to a circular region in the center of the screen. The code uses `d3.select`, `d3.range`, and data joins to generate 100 rectangles per direction, while SVG `<mask>` elements with black-and-white circles define the visible circular areas. The rendering is fully SVG-based and responds to the full window size.

Nnim@brejnholt.dk
91% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6. It displays a grid of vertical and horizontal striped rectangles overlaid with two circular masks, creating intersecting line patterns. The visualization uses `d3.select`, `d3.range`, and the `join` pattern to generate 100 SVG rectangle elements in each direction. Two SVG masks, each containing a black or white circle, selectively reveal or hide portions of the stripes, producing the geometric contrast characteristic of LeWitt’s work. The SVG fills the entire browser window.

AAndre J Denais
91% match
Loading thumbnail…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical stripes. Two circular masks are applied to the stripes, creating a layered pattern where each mask reveals or hides portions of the rects. The visualization uses d3.select and d3.range to create 100 rectangles in each direction, rendering the final composition as an SVG. The code builds the masks with SVG mask elements and circle shapes, filling the entire window.

Yyejichun@naver.com
91% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3 to generate intersecting horizontal and vertical SVG rectangles. A pair of SVG masks with circular cutouts reveal the lines only within two offset circles, creating an optical moiré pattern across the full viewport. The code uses `d3.select`, `d3.range`, and SVG `mask` elements, rendering 100 stripes in each direction with dimensions tied to `window.innerWidth` and `window.innerHeight`. The result is a precise, generative interpretation of LeWitt’s geometric style, driven entirely by D3’s data join and SVG primitives.

Nnpinta
91% match