Skip to main content
SimilarExport ZIP
100%

Sol lewitt reproduction with D3 - not using class JVK

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

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.

AI-generated description

A Sol Lewitt ReproductionSol Lewitt art piece

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol lewitt reproduction with D3 JVK

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.

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
90% 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
89% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This D3.js reproduction of a Sol LeWitt artwork generates a grid of 100 horizontal and 100 vertical SVG rectangles, each 10 pixels thick, which are masked by two opposing circular shapes. Using the `select` and `range` APIs from d3, the code appends SVG elements and utilizes two masks—one hidden by a black rectangle with a white circle, the other with inverted colors—to create an intersecting ring pattern. The final visualization, sized to the full browser window, forms a crosshatched composition with circular cutouts, demonstrating D3's declarative `.join` method for efficient element creation.

Jjmetzg11alpine
89% match
Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by generating a grid of horizontal and vertical stripes that are partially revealed through two circular masks. The horizontal stripes are masked by a circle with a white fill on a black background, while the vertical stripes use the inverse mask, creating a cross-like interplay of lines within the circular region. Built with D3 v6, the code uses `selectAll` and `join` to create 100 rectangles in each direction, with `range(n)` providing the data. The SVG masks, defined via `mask` and `circle` elements, control which parts of the stripes are visible.

Jjv
89% match
Loading thumbnail…

Sol LeWitt Reproduction in D3 - Javan

This example recreates a Sol LeWitt-inspired geometric composition using D3.js and SVG rendering. It displays a grid of thin horizontal and vertical rectangles layered over each other, with two circular masks creating intersecting circular cutouts that reveal or hide portions of the rectangles. The code uses D3 selections, `range()` for data generation, and `.join()` to bind 100 rectangles per axis to the SVG. The `mask` element defines the circular regions, with one mask using a white circle on black and the other using a black circle on white.

JJavan Friedel
89% 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
89% match
Loading thumbnail…

Sol LeWitt SVG

This example reproduces a Sol LeWitt-style drawing using D3.js and SVG, displaying a grid of horizontal and vertical striped bars that are partially revealed through circular masks. Two mask layers alternate between clipping the horizontal and vertical rectangles, creating a layered composition where the bars intersect and disappear within the central circle. The code uses D3’s `select`, `range`, and data joins (`join('rect')`) to generate 100 rectangles in each direction, with masks defined via SVG `<mask>` elements and applied through `attr('mask', 'url(#circle-mask)')`. The visualization renders full-window, with dimensions derived from `window.innerWidth` and `window.innerHeight`.

VValentine Solonechnyi
89% match