Skip to main content
SimilarExport ZIP
100%

Lesson - Sol LeWitt reproduction Vertical portion

✓ Published0🌍 Public
Aastrologyhesitant
Last edited Sep 20, 2022
Created on Sep 20, 2022

This example reproduces a vertical portion of a Sol LeWitt wall drawing using SVG. It shows a series of thin horizontal rectangles clipped by a circular mask, creating a striking geometric composition of striped bands within a circular boundary. The code builds the SVG dynamically with `document.createElementNS`, setting a `mask` element containing a white circle to reveal the rectangles. The mask uses a black background rect and a white circle to define the visible region, with all elements generated through a simple JavaScript loop.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style drawing using SVG, layering horizontal and vertical bands that are clipped by circular masks. The piece shows a 200-pixel radius circle centered on the canvas, where alternating stripes of a solid hue and the page background are exposed through two distinct mask configurations. The first mask reveals the horizontal bands within the circle, while the second reveals the vertical bands outside it, creating an optical interplay. The code uses JavaScript’s `document.createElementNS` to generate SVG elements, setting attributes like `width`, `height`, and `mask` directly on each shape.

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

Sol Lewitt Reproduction Vertical

This example reproduces a Sol LeWitt-style drawing as a vertical sequence of horizontal stripes, clipped by a circular mask centered on the screen. It shows how generative geometry can create a minimalist composition directly in the browser. The code uses raw SVG APIs via `document.createElementNS` and `setAttribute` to construct 100 rectangles, each 10 pixels tall, spanning the full viewport width. A `mask` element with a white circle limits visibility, while the page fills the entire window with no margins or scrolling. The rendering approach is entirely procedural, using only vanilla JavaScript and SVG without external libraries.

Eelgato_1994
89% match
Loading thumbnail…

Lesson - Sol LeWitt reproduction

This example reproduces a Sol LeWitt-style drawing using raw SVG elements generated through JavaScript. It creates a full-screen SVG canvas and populates it with one hundred vertical rectangles, each 10 pixels wide, spaced 20 pixels apart, filling the viewport’s height. The code uses the Document API’s `createElementNS` to programmatically construct SVG `<rect>` nodes and appends them to the document body, with CSS setting the fill to black. The result is a minimalist, grid-like pattern of evenly spaced black bars across the screen.

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

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using generative SVG. It shows a grid of alternating horizontal and vertical stripes, with two circular masks revealing different portions of the pattern: one mask displays the horizontal bands, the other the vertical bands. The code creates the visualization by appending rectangle elements to an SVG canvas and applying SVG `mask` definitions that use `circle` and `rect` shapes. The stripes are drawn with a loop, and the entire composition scales to the browser window’s dimensions.

CCereces
89% match
Loading thumbnail…

SVG Sol LeWitt vertical

This example generates an SVG visualization inspired by Sol LeWitt’s geometric wall drawings. It shows a grid of alternating horizontal and vertical black stripes that are visible only within a circular mask centered on the screen. The code uses the Document Object Model’s `createElementNS` method to construct SVG elements, including a mask containing a circle, and appends 48 horizontal and 48 vertical rectangles. The rectangles are clipped by the mask via the `url(#circle-mask)` reference, producing a circular cutout effect against a full-window backdrop.

Mmax-31
89% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using only SVG primitives and CSS masking, with no external data. It displays a grid of alternating horizontal and vertical stripes over the full viewport, clipped to reveal two overlapping circular forms at the center. The code builds SVG elements directly via the DOM API, creating 100 horizontal and 100 vertical rectangles. Two SVG masks—one inverting the other—combine to produce the layered visual effect, while d3 is listed as a dependency but not used in the logic.

NNikki Masroor
89% match