Fork of Sol LeWitt Reproduction

100%

Fork of Sol LeWitt Reproduction

✓ Published1🌍 Public

Last edited Feb 8, 2023

Created on Feb 8, 2023

This example reproduces a Sol LeWitt-inspired generative drawing using raw SVG and D3 selection utilities. It shows a grid of thick horizontal and vertical bars intersecting across the full viewport, with a circular mask revealing a clean white center where the lines are hidden. Two SVG masks stack to selectively hide and show line segments: the first mask clips horizontal bars through a black rectangle with a white circular hole, while the second inverts this to mask vertical bars. The code constructs all elements dynamically via `document.createElementNS` and appends them to the page, relying on D3's `selection` import for utility but primarily using native DOM APIs.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example recreates a Sol LeWitt art piece using generative SVG drawing. It shows a grid of thin horizontal and vertical lines that are selectively revealed through two circular masks, creating a cross-shaped pattern within a central circle. The code builds the visualization entirely with raw SVG elements and the DOM API, using `createElementNS` and `setAttribute` to construct rectangles and masks. The masks, defined as `circle-mask` and `circle-mask-2`, combine black and white fill layers to control which line segments remain visible, producing the final geometric composition.

EEmanuele Pizzuti

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using an SVG generated procedurally. It draws 100 horizontal and 100 vertical bars in a layered grid, with two circular masks controlling which parts of each set are visible. The first mask reveals the horizontal lines inside a central circle, while the second shows the vertical lines outside that same circle. The code builds the graphic with native SVG elements created via JavaScript and the DOM API, setting the mask attributes directly on each rectangle to create the overlapping visual effect.

RRogelio Díaz-Méndez

91% match

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing using only raw SVG and JavaScript, with no external libraries. It displays a grid of alternating horizontal and vertical lines that remain visible only within two intersecting circular masks, creating a dynamic visual interplay between the line directions. The code builds the SVG dynamically by appending a set of horizontal rectangles masked by a black/white circle, and vertical rectangles masked by an inverse circle, both centered on the screen. The rendering relies on native SVG mask elements and DOM manipulation in plain JavaScript.

MMaras13

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using raw SVG and JavaScript, without any external libraries. It generates 100 horizontal and 100 vertical rectangles that intersect to form a grid across the entire viewport. Two SVG masks—a circular mask and an inverted circular mask—are applied to the rectangles, creating a sharp circular boundary with a single horizontal bar cutting through its center, while the surrounding area shows the full grid of vertical bars. The code uses `document.createElementNS` to build the SVG elements dynamically.

PPercivalnot

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using raw SVG and JavaScript, with no external libraries. It shows a grid of horizontal and vertical bars that intersect within two circular masks, creating a geometric composition of alternating stripes and gaps. The code generates 100 horizontal rectangles across the full width and 100 vertical rectangles down the full height, each masked to reveal only the areas inside the circles. The masks are constructed with SVG `mask` elements, combining black and white rects and circles to control visibility, and the result is a clean, minimal visualization of layered line patterns.

BBharath Vijay

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3. It displays a series of 100 horizontal bars overlaid with a circular mask that reveals only the central area of the pattern. Built with the D3 `select` and `range` APIs, the code constructs SVG elements via raw `document.createElementNS` calls and applies a mask to hide bars outside the circle. The design uses black rectangles on a white background, with the circle placed at the center of the viewport.

AAdeelah Mir

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using D3.js, rendering a grid of thin vertical and horizontal lines that are visible only within a circular area at the center of the canvas. The code first draws 100 vertical strips, then applies an SVG mask with a white circle to reveal only the central portion, and finally adds 100 horizontal strips masked the same way. It uses D3’s `select`, `range`, and element joins to generate the rectangles, with the mask defined as an SVG `<mask>` containing a `<circle>`. The rendering output is an SVG graphic sized to the full browser window.

Ppeter@attachmentdivision.com

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction Final with D3

This example reproduces a Sol LeWitt-inspired geometric artwork using D3.js and SVG rendering. It displays a grid of horizontal and vertical black bars that are partially revealed through two circular mask effects, creating intersecting line patterns across the full viewport. The visualization uses d3.select and data joins to generate 100 rectangle elements for each orientation, while SVG mask elements with circle shapes control which portions of the lines remain visible. The bars are positioned mathematically based on array indices, with the masks centered in the window to produce the layered optical effect.

Kkwambokar

90% match