Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction

✓ Published0🌍 Public
EErik L
Last edited Jan 29, 2023
Created on Jan 20, 2023

This example recreates a Sol LeWitt-inspired drawing using overlapping horizontal and vertical bands masked by circular cutouts. It shows how geometric compositions can emerge from simple repetitive elements. The code uses vanilla JavaScript and SVG, creating masks via `createElementNS` and appending 100 rectangles in each direction to the DOM. A D3 selection imports `select` from the d3 library, though the SVG construction is entirely manual, rendering at full window dimensions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using raw SVG and JavaScript. It shows a grid of overlapping horizontal and vertical bands, where a circular area in the center is masked to reveal only the vertical lines, while the outer region displays only the horizontal ones. The code builds the SVG via `document.createElementNS`, creates two SVG `<mask>` elements with circle and rect primitives to control visibility, and renders 100 rectangles per axis. No external libraries are used; the rendering entirely relies on native browser SVG APIs.

PPurshotam Bohra
92% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example uses D3.js to recreate a Sol LeWitt-inspired drawing with horizontal and vertical striped bands. It renders 100 horizontal rectangles and a secondary set of vertical bars clipped by two circle masks, creating an intersecting geometric pattern. The SVG masks reveal only the areas inside the circular regions, with the second mask inverting the visibility. The code uses D3 selections and the `range()` function to generate the marks, with the primary source being the LeWitt reproduction referenced in the README.

Kktshim@snu.ac.kr
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style grid of horizontal and vertical bars, with the pattern masked to reveal a central circle. It uses D3’s `select` and `range` to generate 100 rectangular strips in each direction, while two SVG `<mask>` elements—one inverted—combine to create the circular cutout effect. The code runs in a React environment and renders vector graphics as SVG.

Ccharlieronchetti@gmail.com
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.3.0, generating a grid-like pattern of alternating vertical and horizontal bands over the full browser viewport. The artwork uses two SVG masks—one with a white circle punched through black and another with a black circle on white—so that vertical stripes appear only within the circular region, while horizontal stripes are visible everywhere except inside that circle. The code constructs 100 rectangles in each orientation via `selectAll` and `data().join()`, setting positions and dimensions to cover the canvas.

SSamuele Greco
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using only SVG and JavaScript, creating a grid of alternating horizontal and vertical bands. Two circular masks reveal the layered strokes: the first mask exposes vertical strips within a centered circle, while the second inverts that region to show horizontal strips outside it. The code generates 100 rectangles per direction, each 10 pixels thick, using the `document.createElementNS` API and SVG `mask` elements to compose the visual interplay. The result is a clean, geometric abstraction that mimics the artist’s instructional art style.

Mmavercikalvin
91% match
Loading thumbnail…

Fork of Sol Lewitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript without any external libraries. It renders two sets of overlapping rectangles: 100 horizontal stripes and 100 vertical stripes, both evenly spaced across the full window size. A circular mask, defined via the SVG `mask` element, restricts visibility of the horizontal stripes to a centered circle, creating a layered geometric effect. The code dynamically creates SVG elements using `document.createElementNS` and appends them to the page, with all dimensions derived from `window.innerWidth` and `window.innerHeight`.

HHéloïse Feldmann
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric composition using overlapping horizontal and vertical bands. It generates 100 rectangles in each direction, with alternating masks that reveal or hide symbol-shaped cutouts across the canvas. The visualization uses D3 v6 to create SVG elements and mask patterns, employing `d3.range` for data generation and `d3.symbol` for the path shapes. Each mask applies a contrasting fill to selectively display the symbols, creating a layered optical effect. The rendering is fully SVG-based and responds to the window size.

TTowlGol
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using raw SVG and JavaScript, creating a geometric composition of overlapping horizontal and vertical bands. The artwork shows a grid of alternating colored stripes confined to a circular mask, with a second inverted mask revealing a contrasting ring pattern. The code builds SVG elements dynamically, using two SVG masks—one with a white circle on black and another with a black circle on white—to control which stripes appear in the center and edges. It relies on standard DOM APIs like `createElementNS` and `setAttribute` to generate 100 rectangles in each orientation, without any external libraries.

WWRCIECH
90% match