Skip to main content
SimilarExport ZIP
100%

Sol Lewitt Reproduction

✓ Published1🌍 Public
Nnicolekevans
Last edited Nov 14, 2022
Created on Nov 14, 2022
Forked from HTML Starter

This visualization reproduces a Sol LeWitt-inspired drawing using nested SVG masks to create a circular window onto a grid of horizontal and vertical stripes. A white circle masked over black reveals colored horizontal bars, while a second inverted mask on a white background exposes vertical bars in the surrounding area. The code builds the SVG dynamically with `document.createElementNS`, configuring two `<mask>` elements and generating 100 rectangular stripes in each direction. The colors alternate through the default black fill, producing a stark geometric pattern that fills the browser viewport.

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 SVG

This example reproduces a Sol LeWitt-style geometric drawing using SVG, showing a grid of horizontal and vertical stripes that are masked to reveal a central circle. The visualization dynamically fills the browser window by setting the SVG width and height to the viewport dimensions. It constructs two SVG masks with white and black circles and rectangles, then renders 100 horizontal and 100 vertical stripe rectangles, each referencing a mask to clip the pattern. The code uses the DOM API `document.createElementNS` to build SVG elements programmatically with JavaScript.

Mmaximus2581
93% match
Loading thumbnail…

Sol Lewitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing using SVG, rendering 100 horizontal bars masked by a central circle. The code builds the visualization dynamically with the `document.createElementNS` API, creating a white rectangle and black circle to define the mask, then looping through the bars. Each bar is 10 pixels tall, spaced 20 pixels apart, and clipped by the `url(#circle-mask)` reference. The visualization fills the entire browser window, with the mask and bars sized based on `window.innerWidth` and `window.innerHeight`, producing a geometric composition of stripe-like shapes.

HHéloïse Feldmann
92% 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
92% match
Loading thumbnail…

Sol LeWitt

This visualization reproduces Sol LeWitt’s geometric style using overlapping horizontal and vertical stripe patterns. It shows a large circular mask that reveals alternating bands of stripes against a contrasting background. The code uses raw SVG elements via `document.createElementNS` to construct rectangles, masks, and circles. A single white circle and black circle are combined with two masks to clip the stripe layers, creating an interplay of positive and negative space. The rendering relies on SVG’s mask attribute and fills the full viewport with 100 stripes in each direction.

Ddalia.miliauskaite@me.com
92% match
Loading thumbnail…

Reproduction of Sol LeWitt

This example recreates a Sol LeWitt-inspired drawing using only raw SVG and JavaScript, without any external libraries. It shows a circular mask revealing a grid of horizontal and vertical black bars over a white background. The code constructs the visualization by creating SVG elements dynamically, using two masks—one that exposes horizontal stripes inside a circle and another that reveals vertical stripes in the surrounding area. The result is a geometric pattern that mimics LeWitt’s wall drawings through simple DOM manipulation.

PPhan Nguyen
92% 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
91% match
Loading thumbnail…

Full SolLeWitt Reproduction D3

This example reproduces a Sol LeWitt-inspired drawing by rendering a grid of vertical and horizontal stripes that intersect through two complementary circular mask regions. The visualization uses raw SVG DOM manipulation in vanilla JavaScript, creating 100 vertical rectangles masked by a circle cutout and 100 horizontal rectangles masked by an inverted circle. The masks, defined via SVG `mask` elements with white and black fills, reveal alternating stripe patterns. The result is a geometric interplay of lines and negative space, rendered dynamically to fill the browser window.

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