JSBasics

100%

✓ Published0🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

This example recreates a Sol LeWitt-inspired geometric composition using JavaScript and D3.js, where vertical and horizontal stripes intersect around a circular mask. The visualization shows a grid of thin black and white lines forming a cross-hatched pattern with a central circular cutout. The code builds SVG elements dynamically using `document.createElementNS`, applying two different masks (`circle-mask` and `circle-mask-2`) to reveal or hide the stripes. D3 v7 is loaded but the rendering relies entirely on raw SVG manipulation rather than data binding or scales.

AI-generated description

Building the Sol Lewitt art using JS in the Vizhub platform We can find a lot of Sol's art here

MIT Licensed

Similar vizzes

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

84% match

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

83% match

Loading thumbnail…

D3 Sol LeWitt reproduction

This example reproduces a Sol LeWitt-style geometric composition using D3 v7 and SVG. It layers two masks over intersecting grids: one mask reveals vertical stripes through alternating D3 symbols, while the other horizontally bands the canvas with a second symbol set. The code uses `d3.range`, `d3.symbols`, and `d3.symbol` to generate the mask shapes, then applies the masks via SVG `mask` attributes. The result combines generative patterns with minimalist grid structures, demonstrating mask-based compositing in a browser window.

HHtet Yan Oo

83% match

Loading thumbnail…

Sol LeWitt in D3

This example recreates a Sol LeWitt-inspired drawing using D3.js, showing a grid of thin black vertical and horizontal lines that intersect within a circular central region. Lines outside a 200-pixel-radius circle are masked out, while a second mask inverts the effect so vertical lines appear only in the periphery and horizontal lines appear only in the center. The code builds SVG elements with D3 selections and the `join` pattern, using `d3.range` to generate data and SVG `<mask>` elements to control visibility. The visualization fills the entire browser window and renders exclusively with vector graphics.

JJeya Balaji Balasubramanian

83% 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

83% 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

83% match

Loading thumbnail…

D3 Sol Lewitt

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.

Aadonisacruz0@gmail.com

83% match

Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt–inspired geometric composition using D3 v7. It renders a grid of horizontal and vertical bars, each clipped by a circular mask to create a bold, minimalist pattern. The code uses `d3.select`, `d3.range`, and `join` to generate SVG `<rect>` elements, while two overlapping masks (`circle-mask` and `circle-mask-2`) selectively reveal or hide bars within and outside the central circle. The result is an interplay of lines and negative space, driven entirely by SVG primitives and data-driven iterations.

FFrancisco Ibelles

83% match