Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Reproduction

✓ Published1🌍 Public
Ccardoza-IPH
Last edited Sep 21, 2022
Created on Sep 21, 2022
Forked from SVG Fundamentals

This example reproduces the geometric style of Sol LeWitt using overlapping horizontal and vertical stripes. A central circular mask reveals the intersection pattern where the two sets of rectangles meet, creating a woven visual effect. The visualization is built with raw SVG elements, including two distinct `<mask>` definitions, and is rendered dynamically in a browser using JavaScript. The code programmatically generates all rectangles in loops, with the masks controlling visibility to achieve the final composition without external libraries.

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

This example reproduces a Sol LeWITT-inspired geometric composition using raw SVG and JavaScript. The visualization layers two sets of striped rectangles—one horizontal, one vertical—whose visibility is controlled by circular masks, creating a clean intersection of perpendicular lines within a central circle. The code constructs SVG elements programmatically via `document.createElementNS`, applying masks with a white circle on black and an inverted black circle on white to reveal alternating patterns. No external libraries are used; the rendering relies entirely on native SVG mask and rect primitives.

Aabhineetsingh10
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 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 drawing by assembling a grid of horizontal and vertical stripes that intersect to form a circular void at the center. The piece renders 100 horizontal rectangles masked by a black circle, while a second set of 100 vertical rectangles uses an inverted mask with a white circle, creating a complementary pattern of visible lines. Built with the HTML DOM and SVG APIs, the visualization constructs elements directly via JavaScript, using `createElementNS`, `setAttribute`, and SVG mask definitions to achieve the geometric composition. The result is a computational homage to LeWitt's conceptual art, where simple algorithmic rules generate complex visual interplay.

Ccharlieronchetti@gmail.com
91% match
Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt-style geometric artwork using overlapping horizontal and vertical striped rectangles, with a circular mask creating a central focal point. The horizontal bands rotate continuously via a CSS keyframe animation applied to the SVG elements. Built with D3.js, the code uses `select` and `range` to generate 100 rectangles in each direction, while two SVG masks (`circle-mask` and `circle-mask-2`) alternately reveal and hide the stripes, producing an inverted circular pattern at the center.

GGayan Priyadarshana
91% match
Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style geometric composition as a vertical grid of alternating vertical and horizontal stripes. It shows a structured visual pattern where two circular masks define regions of overlap, creating a cross-shaped interplay of lines. The rendering uses plain SVG elements—`rect` and `circle`—with two custom masks (`circle-mask` and `circle-mask-2`) to control which stripes appear in each area. The code dynamically generates 100 vertical and 100 horizontal rectangles, each styled with a distinct mask, to achieve the final layered effect. No external libraries are used; the visualization relies solely on native SVG and JavaScript.

Mmaciekawsq@gmail.com
90% 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
90% match