Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Reproduction Final

✓ Published1🌍 Public
AAndre J Denais
Last edited Apr 21, 2021
Created on Apr 21, 2021

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.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces Sol LeWitt’s geometric wall drawing style by generating a grid of horizontal and vertical black stripes on a white background. A circular mask in the center of the SVG reveals only the stripes inside the circle, while a second inverted mask applies to the vertical lines, creating a layered crosshatch effect. The code uses raw SVG elements created via the DOM API (`document.createElementNS`), with two mask definitions (`<mask>` and `<mask2>`) to control visibility. The rendering is entirely procedural, with 100 rectangles in each direction, and no external data source or library beyond vanilla JavaScript and SVG.

Aalexscott-untitled
93% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using SVG and JavaScript. A circular mask isolates a group of horizontal stripes, while un-masked vertical lines extend across the full canvas. The code generates 100 horizontal rectangles with a set height and 100 vertical rectangles, positioning them in a grid pattern via the `createElementNS` API. The mask, defined with a `circle` element, limits the horizontal stripes to a central circular region, creating a subtle intersection effect between the two sets of lines.

AArnulfotos
93% match
Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript, displaying a grid of narrow horizontal rectangles that become visible only within a central circular mask. The code creates an SVG canvas via `document.createElementNS`, defines a mask with a single circle, and generates 100 stacked `<rect>` elements, each 10 pixels tall, that intersect the mask to form the final composition. The result is a precise, minimal geometric pattern whose vertical bands are revealed through the circular aperture, mimicking the clean, systematic aesthetic of LeWitt's wall drawings without any external libraries.

AAndre J Denais
93% match
Loading thumbnail…

Sol LeWitt reproduction

This piece reproduces a Sol LeWitt wall drawing using JavaScript to generate SVG elements dynamically. It displays a composition of horizontal and vertical striped rectangles that form a distinct circular pattern at the center of the viewport. The rendering uses two SVG masks, `inner-circle-mask` and `outer-circle-mask`, to control the visibility of the 100 horizontal and 100 vertical `<rect>` elements, which are sized relative to the window’s dimensions. The code relies on basic SVG APIs such as `createElementNS`, `setAttribute`, and `appendChild` to construct the artwork.

AAngela Kochoska
93% match
Loading thumbnail…

Sol Lewitt Reproduction javascript in html

This example reproduces a Sol LeWitt wall drawing using JavaScript and dynamically generated SVG. It shows a grid of horizontal and vertical stripes, with a circular area in the center where the pattern is inverted due to two overlapping SVG masks. The code creates the SVG namespace via `document.createElementNS` and builds the composition procedurally. The first mask hides the vertical lines within a 200-pixel radius circle, while the second mask hides the horizontal lines in that same region. The rendering relies entirely on core SVG and JavaScript APIs, with no external libraries.

GGullyPlook
93% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric piece using only SVG and JavaScript, creating an intricate grid of horizontal and vertical lines. It shows a large circular mask revealing a woven pattern of alternating line directions, with the circle centered on a full-screen canvas. The code builds the visualization by constructing SVG elements via the DOM API (`document.createElementNS`), defining two masks (`circle-mask` and `circle-mask-2`) to clip horizontal and vertical line groups. It generates 100 horizontal rectangles and 100 vertical rectangles, each 10 pixels thick, with the masks controlling visibility to create the overlapping effect. No external libraries are used; the rendering relies purely on raw SVG and JavaScript.

IIndranil Biswas
92% 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
92% match
Loading thumbnail…

Sol LeWitt Reproduction Inverse

This interactive SVG reproduction of a Sol LeWitt wall drawing layers horizontal and vertical striped rectangles, creating a grid-like pattern that is revealed through two circular masks. The first mask uses a black background with a white circle to show only the horizontal bands inside the circle, while the second inverts this with a white background and black circle to display the vertical bands outside it. The code builds the entire composition dynamically via the DOM API, creating 100 striped rectangles per direction and applying the masks with `url(#circle-mask)` and `url(#circle-mask-2)`. The piece renders full-window, adapting to the viewport dimensions.

Aandu006@gmail.com
92% match