Sol Lewitt Reproduction javascript in html

100%

Sol Lewitt Reproduction javascript in html

✓ Published1🌍 Public

Last edited Sep 14, 2023

Created on Sep 13, 2023

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.

AI-generated description

[Sol Lewitt] Reproduction (https://en.wikipedia.org/wiki/Sol_LeWitt)

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

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

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

92% match

Loading thumbnail…

Sol Lewitt Reproduction - SVG

This example reproduces a Sol Lewitt conceptual drawing using only SVG and JavaScript. It renders two sets of horizontal and vertical striped rectangles that are masked to reveal a central circle, with each line pattern clipped differently to create the interplay of shapes. The code dynamically generates SVG elements via the DOM API, using masks and circles to control visibility, and adapts the artwork to the full browser window dimensions.

AAdil Zeshan

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

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

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

91% match

Loading thumbnail…

Sol LeWitt Reproduction HTML + SVG

This example reproduces a Sol LeWitt-style geometric composition using HTML and SVG, showing a grid of horizontal and vertical lines that intersect within circular masks to create a layered visual effect. Two SVG masks define the visibility regions: one reveals a circle of horizontal stripes, while the other selectively hides vertical stripes within a matching circle. The code programmatically builds the SVG structure using the `createElementNS` API, generating 100 horizontal and 100 vertical rectangles with alternating mask references. No external libraries are used; the rendering relies entirely on native SVG elements and attributes.

OOleg Zhernovoy

91% match