Skip to main content
SimilarExport ZIP
100%

JavaScript Production

✓ Published0🌍 Public
Yyankesswang
Last edited Oct 23, 2022
Created on Oct 23, 2022
Forked from Reproduction

This example reproduces a Sol LeWitt wall drawing using SVG and JavaScript. It generates a grid of horizontal and vertical stripes across the full browser window. The piece shows a large central circular area where both stripe orientations are visible, while the surrounding space reveals only horizontal or vertical lines. The code constructs two SVG masks, each containing a circle, to control which stripes appear in different regions. One hundred rectangles are created programmatically for each direction.

AI-generated description

A reproduction of a Sol Lewitt art piece.

MIT Licensed

Similar vizzes

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
89% 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
89% 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
87% match
Loading thumbnail…

Sol LeWitt

This example reproduces a Sol LeWitt drawing using SVG. It renders a grid of horizontal and vertical stripes, with a circular mask creating the illusion of layered bands across the canvas. The stripes are generated programmatically in JavaScript, using `document.createElementNS` to build SVG `rect` elements. Two complementary masks (`circle-mask` and `circle-mask-2`) alternate which stripe orientation is visible, producing a clean geometric composition that adapts to the full browser window size.

Aainhoadieruiz@gmail.com
87% match
Loading thumbnail…

Sol LeWitt Exercise with JS

An SVG built with vanilla JavaScript recreates a Sol LeWitt-inspired wall drawing by layering two sets of 100 striped rectangles. Horizontal and vertical black bars cross the full viewport, but a pair of circular masks restricts visibility: one mask shows only the horizontal stripes inside a 200-pixel circle, while the second reveals vertical stripes outside that same radius. The result is a clean, conceptual grid where the two orientations visually swap at the circle's boundary, using the SVG `mask` element and dynamic element creation via `document.createElementNS`.

Ppkdvalis
87% match
Loading thumbnail…

Sol Lewitt Reproduction

This example reproduces a Sol LeWitt-style drawing using SVG and JavaScript. It displays a grid of vertical and horizontal stripes that are visible only within a central circle, creating an intersection pattern. The code uses the Document Object Model (DOM) to create SVG elements, including masks, rectangles, and circles. Two circular masks with contrasting fills control where each set of stripes is revealed, demonstrating a generative art technique with a clean, geometric output.

VVincent Leduc
87% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT drawing using raw SVG and JavaScript, without any external libraries. It renders 100 horizontal and 100 vertical striped rectangles that intersect to create a geometric grid, with two circular masks applied to reveal different portions of the stripes. The `mask` element and `circle` primitives define a central circular boundary, while the second mask inverts its effect. The visualization spans the full browser window by reading `window.innerWidth` and `window.innerHeight`. The code constructs SVG elements programmatically via `document.createElementNS` and sets attributes directly, demonstrating a minimal approach to generative art.

TTheo-0201
86% match
Loading thumbnail…

Sol LeWitt Vanilla JavaScript

This example reproduces a Sol LeWitt wall drawing using only Vanilla JavaScript and the SVG API. It constructs an SVG scene with a white rectangle and a black circle defined as a mask, then renders 100 horizontal stripes as individual SVG `<rect>` elements. Each rectangle’s visibility is filtered through the circular mask, creating the artwork’s characteristic banded composition within a circular boundary. The code dynamically sets the canvas to the browser’s full window dimensions and uses no external libraries or data sources.

Ppeter@attachmentdivision.com
86% match