Skip to main content
SimilarExport ZIP
100%

Ep. 3.4 - SoL LeWitt Art Reproduction Final - MK

✓ Published0🌍 Public
Mmattykuch
Last edited Aug 10, 2022
Created on Aug 10, 2022

This example reproduces a Sol LeWitt–style wall drawing using SVG masks to create intersecting stripe patterns. A central circular mask reveals a grid of horizontal and vertical colored bands, while a second inverted mask swaps the visible regions, producing a layered composition of alternating line orientations. The code builds all elements programmatically via the raw SVG DOM API, generating 100 horizontal and 100 vertical rectangles with the `createElementNS` method. No external libraries are used; the full-screen visualization relies solely on native SVG mask and rectangle elements.

AI-generated description

A demo of SoL LeWitt Art.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ep. 3.3 - SoL LeWitt Art Reproduction Vertical - MK

This example reproduces a Sol LeWitt-inspired drawing using the raw SVG API and the DOM’s `createElementNS` method. It renders 100 horizontal and 100 vertical gray rectangles in a grid, with all horizontal bars clipped by a circular mask applied via an SVG `<mask>` element. The mask, centered on the viewport, reveals only the horizontal strokes inside its 200-pixel radius while the vertical bars remain fully visible, creating a layered geometric pattern. The visualization uses `window.innerWidth` and `window.innerHeight` to size the full-screen canvas.

Mmattykuch
93% match
Loading thumbnail…

Ep. 3.2 - SoL LeWitt Art Reproduction - MK

This example reproduces a Sol LeWitt-style wall drawing using raw SVG. It shows a series of one hundred thin vertical rectangles evenly spaced across the full browser viewport, creating a minimalist striped pattern. The code generates the SVG element dynamically via the DOM API `document.createElementNS`, setting its width and height to match `window.innerWidth` and `window.innerHeight`. Each rectangle is positioned at a fixed increment of 20 pixels along the x-axis, with a width of 10 pixels and a height equal to the viewport, resulting in a regular, repeating visual rhythm.

Mmattykuch
91% match
Loading thumbnail…

Sol LeWitt Reproduction Final

This example reproduces a Sol LeWitt wall drawing using pure JavaScript and SVG APIs. It shows a grid of horizontal and vertical striped rectangles overlaid with two circular masks, creating a composition of intersecting lines that fade into a central circle. The code builds SVG elements dynamically via `document.createElementNS`, applying a black-to-white mask and an inverted white-to-black mask to reveal alternating line directions. One hundred horizontal strips and one hundred vertical strips are generated in loops, with the masks controlling visibility to form the final geometric pattern.

AAndre J Denais
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
84% match
Loading thumbnail…

ep 2 Sol LeWitt

A web page reproduces a Sol LeWitt wall drawing using SVG, where horizontal and vertical stripes are clipped by two circular masks to create overlapping geometric forms. The page builds the composition dynamically with JavaScript, creating a full-screen SVG and adding one hundred horizontal bands intersected by one hundred vertical bands. Each band, drawn as a thin rectangle, is masked so that horizontal stripes appear within one circle and vertical stripes within another, producing the characteristic minimal, grid-like pattern. The code uses the SVG `<mask>` element and `document.createElementNS` API to assemble the artwork entirely in the browser.

Nneojournalist
84% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using dynamically generated SVG elements. It shows a grid of horizontal and vertical stripes, masked to reveal a central circular area where only horizontal lines appear, surrounded by vertical lines. The code uses raw Document Object Model (DOM) methods such as `document.createElementNS` and `setAttribute` to construct the SVG, with two mask definitions (`circle-mask` and `circle-mask-2`) controlling visibility. No external libraries are used; the rendering relies purely on SVG rectangles and masks in the browser.

PPareel Amre
84% match
Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-inspired wall drawing using raw SVG and JavaScript. It presents a grid of horizontal and vertical stripes that intersect through two circular masks, creating a layered composition with a central white circular void and a black circular overlay. The code constructs SVG elements directly via the DOM API, including `rect` shapes and two custom `<mask>` definitions, to alternate stripe visibility. A total of 200 rectangles are generated programmatically, with no external libraries or frameworks, relying solely on browser-native SVG rendering to achieve the geometric effect.

GGbemiga Atolagbe
84% match
Loading thumbnail…

Sol LeWitt Reproduction Final

This example reproduces a Sol LeWitt wall drawing using two SVG masks to create a central circular region where intersecting horizontal and vertical lines alternate between foreground and background. The code builds the visualization with plain JavaScript and SVG DOM manipulation, using the `mask` element with black and white `rect` and `circle` shapes to control visibility. Each of the 100 lines is drawn as a thin `rect` element, with horizontal lines clipped by the first mask and vertical lines clipped by the second, producing a geometric pattern that shifts contrast inside and outside the circle.

CCeciliaW888
84% match