Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Repro w/ vanilla JS

✓ Published1🌍 Public
Hhelloelectro
Last edited Feb 10, 2023
Created on Feb 6, 2023

A full-screen SVG reproduction of a Sol LeWitt wall drawing displays two interlocking sets of thin vertical and horizontal bars. A central circular mask inverts the visibility of the two grids, creating a stark contrast between the denser vertical lines inside the circle and the horizontal lines outside. The piece is built with vanilla JavaScript, dynamically creating SVG elements and applying mask definitions without any external libraries. The code generates one hundred vertical and one hundred horizontal rectangles, using the `mask` attribute to alternate their visibility based on the circle’s boundary.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt reproduction Vertical

A web-based reproduction of Sol LeWitt's wall drawing, rendered as a full-screen SVG using programmatic JavaScript. The piece displays a grid of thin, alternating horizontal and vertical gray bars, with a circular mask that inverts the contrast in the center, creating a subtle optical effect. It uses the raw SVG DOM API (`createElementNS`) to build elements, applying two masks (`circle-mask` and `circle-mask2`) to control visibility. The design is generated entirely in code, with no external libraries, drawing 100 horizontal and 100 vertical rectangles.

DDilara Bozkurt
92% match
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
91% match
Loading thumbnail…

Sol LeWitt Reproduction

This piece re-creates a Sol LeWitt wall drawing as a responsive, browser-based SVG composition. It shows a grid of horizontal and vertical black bars that intersect only within a central circular region, creating a dynamic interplay of lines and void. The code uses the Document Object Model (DOM) API, specifically `createElementNS` and `setAttribute`, to construct SVG elements. It applies two SVG masks, `mask` and `mask2`, to limit the drawn rectangles to the circle’s area, with the horizontal bars masked by a white circle and the vertical bars by the inverse.

Aajoua
91% match
Loading thumbnail…

Sol LeWitt in Vanilla JavaScript

This example recreates a Sol LeWitt wall drawing using only Vanilla JavaScript and the SVG API, with no external libraries. The SVG dynamically adapts to the browser window’s dimensions, generating a composition of alternating horizontal and vertical bars. It uses SVG `<mask>` elements with circles to clip the bar patterns, revealing a circular region in the center where the orientation of the lines shifts, mimicking the geometric interplay found in LeWitt’s conceptual art. The code builds all shapes procedurally via `createElementNS`.

Xxinyuwangxyw
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
91% 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
90% 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
90% match
Loading thumbnail…

Sol LeWitt ReproductioN

This piece reproduces a Sol LeWitt wall drawing as an interactive SVG composition. It shows a grid of horizontal and vertical black lines that intersect across the full browser window, except within a circular mask centered on the screen. The code uses raw JavaScript to construct and append SVG elements, creating 100 horizontal and 100 vertical rectangles. Only the horizontal lines are clipped by the mask, which is defined using the SVG `mask` element and referenced via the `url(#circle-mask)` attribute, leaving the vertical lines unbroken. The work is generated entirely from the code’s geometry, echoing LeWitt’s instruction-based art.

Aag17@tutanota.de
90% match