Sol LeWitt Reproduction

100%

Sol LeWitt Reproduction

✓ Published1🌍 Public

Last edited Sep 19, 2023

Created on Sep 19, 2023

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.

AI-generated description

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

Similar vizzes

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

95% match

Loading thumbnail…

SOL LEWITT REPRODUCTION vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript. It shows a grid of thin horizontal and vertical rectangles intersecting over a central circle, created without external libraries or frameworks. The code uses `document.createElementNS` to build SVG `<rect>` elements inside two masks (`circle-mask` and `circle-mask-2`) to clip alternating stripes, with the circle radius fixed at 200 pixels. The rendering approach relies entirely on native DOM manipulation and SVG mask attributes, producing a clean, generative geometric pattern.

JJude-Clarke

94% match

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

94% match

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

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

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

93% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using pure browser APIs, with no external libraries. It renders 100 horizontal and 100 vertical rectangles in SVG, layered so that a circular mask reveals the grid pattern at the center while masking the opposite orientation at the edges. The code constructs the SVG, masks, and shapes programmatically via `document.createElementNS`, setting attributes like `fill`, `r`, and `mask` on each element. The layout adapts to the full viewport size using `window.innerWidth` and `window.innerHeight`.

Nnpinta

93% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing using procedural SVG. It first draws a series of vertical black rectangles across the full viewport, then applies an SVG mask containing a white circle over a black background to hide a central circular region. Horizontal strips are then drawn across the entire width, with the mask revealing only the area inside the circle, creating an intersecting grid pattern. The visualization uses raw JavaScript with the SVG DOM API to create elements dynamically, reacting to the browser window’s dimensions.

Wwgloss

93% match