Skip to main content
SimilarExport ZIP
100%

Fork of Full Sol lewitt reproduction with D3 - not using class JVK

✓ Published0🌍 Public
Pprospirity
Last edited Jan 13, 2025
Created on Jan 13, 2025

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.9.0. It shows a grid of horizontal and vertical black lines overlaid with a circular mask, creating a pattern where the lines are visible only within the circle. The code uses D3’s `select`, `range`, and `symbol` APIs to construct the SVG elements and a star-shaped mask via `symbols[0]`. A second mask with a circle reveals the full line grid. The rendering is fully SVG-based, with dimensions set to the browser window size.

AI-generated description

A Sol Lewitt ReproductionSol Lewitt art piece

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Full Sol lewitt reproduction with D3 - not using class JVK

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes across the entire browser window. Two SVG masks, each containing a set of geometric symbols, apply contrasting cutout effects to the stripe layers, creating a dynamic interplay between positive and negative space. The code uses D3’s selection, range, and symbol APIs to generate the patterns and masks, with the SVG output sized to the viewport. The artwork draws on LeWitt’s conceptual instructions, here implemented programmatically rather than by hand.

Kkakkanadjoy@yahoo.com
92% 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
91% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3 Classes

This example reproduces a Sol LeWitt wall drawing using SVG and D3.js v6.6.1. It displays a grid of horizontal and vertical stripes, masked by two overlapping circles to create a pattern of contrasting line directions. The code uses D3’s `select`, `range`, `.append`, `.attr`, `.data`, and `.join` APIs to construct the SVG elements directly. Two SVG masks (`circle-mask` and `circle-mask-2`) define the circular visibility regions, with the vertical lines visible inside the first circle and the horizontal lines visible inside the second. The drawing fills the entire browser window.

GGbemiga Atolagbe
91% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece by rendering a grid of horizontal and vertical lines on an SVG canvas. The lines are masked to reveal a circular pattern, with the mask itself containing a defined symbol, creating an interplay between the geometric lines and the circular cutout. The visualization uses the D3 library, including its `select`, `range`, and `symbol` APIs, to generate the SVG elements and masks. It fills the entire browser window, with both horizontal and vertical lines each having a thickness of 10 pixels, spaced 20 pixels apart.

CCurran Kelleher
91% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 version 7. It displays a grid of horizontal and vertical lines overlaid with two masks, each containing a row of distinct geometric symbols. The horizontal lines are masked by one set of symbols, while the vertical lines are masked by an inverted set, creating a layered, intertwined visual effect. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG shapes and `append('mask')` to apply the masking logic dynamically.

Aajoua
91% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction in D3 - Javan

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of horizontal and vertical stripes, with geometric symbols cut out through SVG masks. The code creates 100 rectangular bands in each direction, then applies two complementary masks—one with dark symbols on a light background, the other inverted—to reveal layered patterns. The visualization uses D3’s `select`, `range`, `symbol` and `symbols` APIs, along with SVG `<mask>` elements, to compose the artwork across the full browser window.

JJavan Friedel
90% match
Loading thumbnail…

Fork of Full of Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders a grid of thin horizontal and vertical rectangles across the full browser window. The code uses `d3.range()` and `d3.select` to generate 100 rows and columns, then applies two SVG masks to shape the overlapping lines. Each mask contains a large `d3.symbol` with a star shape, defined via `symbol(symbols[1], 100000)`, which cuts a circular diamond pattern out of the otherwise regular grid. The masked rectangles create a layered visual where lines appear through the star-shaped holes, demonstrating SVG mask composition with D3 selections.

IIgorGorin00
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example visually recreates a Sol LeWitt wall drawing using only horizontal and vertical black lines, shaped by custom masks to form large geometric symbols. The piece uses D3.js (v6) with SVG rendering, generating 100 line groups across the canvas width and height. Two masks, one inverted, apply distinct patterns of D3’s built-in `symbols` (like circles and squares) to cut the lines, revealing positive and negative spaces. The code relies on `select`, `range`, `symbol`, and `join` from D3 to construct the composition dynamically.

Yyankesswang
90% match