Sol de Witt inverse masks

100%

Sol de Witt inverse masks

✓ Published0🌍 Public

Last edited Jan 1, 2026

Created on Jan 1, 2026

Forked from Fork of Sol LeWitt Reproduction - join them

This example reproduces a Sol LeWitt-inspired drawing using two SVG masks to create inverse color effects. It shows a grid of horizontal and vertical black bars that intersect around a central circular area, where the bars appear inverted. The code builds the visualization entirely with SVG elements and the `createElementNS` API, defining two masks—one with a black rectangle and white circle, the other with a white rectangle and black circle—to control which bars display in each region. The bars are generated programmatically in loops, with no external libraries or data sources.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Repro Vertical

This example reproduces a Sol LeWitt drawing using the SVG API. It displays a grid of horizontal and vertical black bars on a white background, creating an intersecting pattern. A circular mask reveals only the horizontal lines within its radius, while a second, inverted mask reveals only the vertical lines outside that same circle. The code constructs the masks and bars dynamically with `createElementNS` and `setAttribute`, using the document’s width and height for full-screen coverage.

SSam Hege

86% match

Loading thumbnail…

Full Sol Le Witt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 and SVG masks. It displays a grid of horizontal and vertical bars, with a central circular region where the two sets of bars visually intersect and invert their colors. The code uses D3 selections with `range` and `join` to generate 100 rectangles in each orientation, and defines two SVG masks with `circle` elements to control which bars are visible. The final image resembles a minimalist bar chart filtered through a circular aperture.

AAmauri Ribeiro

85% match

Loading thumbnail…

Sol LeWitt Reproduction AG

This example reproduces a Sol LeWitt wall drawing using SVG masks and layered rectangles. The code creates two circular masks, one with a black background and white circle, the other inverted, then applies them to 100 horizontal and 100 vertical bars. The result is a grid of intersecting lines visible only within the circular regions, mimicking the geometric precision of LeWitt’s conceptual art. It uses raw SVG DOM manipulation via `document.createElementNS` and mask attributes, with no external libraries.

Gguththered

85% match

Loading thumbnail…

Sol Lewitt All Shapes

This example reproduces a Sol LeWitt-inspired drawing using overlapping geometric masks. The visualization displays a grid of black bars (vertical and horizontal) that intersect with two rows of outlined circles, created by applying two distinct SVG masks—one inverted and one not—to the bar patterns. The code uses D3.js (v6) to dynamically generate the scene, calculating bar placement based on the browser window’s dimensions. It leverages D3’s `selectAll`, `range`, and `join` methods to efficiently append and configure SVG elements, while `d3.symbol` generates the circle paths. The rendering is fully SVG-based within a React-free environment.

JJoel Wilson

85% match

Loading thumbnail…

Sol Le Witt Reproduction Original

This example reproduces a Sol LeWitt-inspired drawing using an SVG bar chart approximation. It shows a grid of thin, evenly spaced horizontal and vertical bars that intersect within a central circular region, creating a woven geometric pattern against a plain background. The visualization uses two SVG masks (`circle-mask` and `circle-mask-2`) to clip alternating sets of 100 rectangles—horizontal bars masked by a white circle, and vertical bars masked by a black circle—so only the overlapping area reveals the full crosshatch effect. The bars are generated procedurally via raw DOM manipulation with `createElementNS` and positioned based on the window dimensions.

AAmauri Ribeiro

85% match

Loading thumbnail…

Sol LeWitt Reproduction Mask Inverse

This example reproduces a Sol LeWitt art piece using an SVG mask to create an inverse circle effect. Horizontal black stripes are partially revealed through a circular mask centered on the canvas, while vertical stripes overlay the full height. The code constructs the SVG dynamically with JavaScript, creating 100 horizontal rectangles masked by a white circle on a black background, plus 100 unmasked vertical rectangles. It uses raw SVG APIs including `createElementNS`, `mask`, and `rect` elements, with no external libraries.

AAndre J Denais

85% match

Loading thumbnail…

Sol Le Witt Vertical

This example generates an abstract, Sol LeWitt-inspired visual composition using only SVG and JavaScript. It creates two circular masks via the SVG `mask` element, and draws a grid of horizontal and vertical rectangles that are selectively revealed through each mask. The first mask shows a series of horizontal lines inside a black circle, while the second shows vertical lines outside a white circle, creating a layered, geometric contrast. The code dynamically creates SVG elements using `document.createElementNS` and appends them to the document, with dimensions tied to the full window size.

SShannon Teoh

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

84% match