100%

Sol LeWitt reproduction

✓ Published1🌍 Public

Last edited Nov 14, 2021

Created on Nov 14, 2021

This example reproduces a Sol LeWitt art piece by writing SVG circles to the DOM, showing two overlapping circles in yellow and black alongside a text label. The code initially creates one circle with an id, then uses `outerHTML` in plain JavaScript to replace it with a larger set of SVG elements, including a second circle and text. The rendering approach relies on direct SVG manipulation with no external libraries, making it a self-contained demonstration of dynamic DOM insertion within an SVG container.

AI-generated description

Sol LeWitt

A reproduction of a Sol LeWitt art piece

This one turned out to be a home grown attempt to write some SVG CIRCLES to the DOM and finding that setting up a div with an id within the SVG didn't work, whereas setting the id in an initial CIRCLE did.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired drawing using only browser-native SVG and JavaScript. It shows a field of thin blue horizontal lines covering the full viewport, overlaid with a row of concentric white circles, and one fully filled white circle at the center. The code creates these shapes imperatively via the SVG DOM API, appending `rect` and `circle` elements inside a loop. It uses `document.createElementNS` for SVG namespace creation and `setAttribute` for geometry, with dimensions tied to `window.innerWidth` and `innerHeight`.

Aainhoadieruiz@gmail.com

86% match

Loading thumbnail…

Sol LeWitt Reproduction

This reproduction of a Sol LeWitt art piece uses overlapping circles, a line, and two SVG paths to explore geometric composition. The SVG displays a red circle with a smaller green circle centered inside it, a navy diagonal line from the top-left corner, and a rectangular outline formed by a path. A second black path with no fill creates a right-angled line. The code relies on plain SVG elements such as `circle`, `line`, and `path`, with no external libraries, using fixed coordinates and stroke widths to define the artwork. A commented-out yellow rectangle indicates an iterative design process.

Aadriana-ss

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

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

84% match

Loading thumbnail…

Sol LeWitt reproductions

This example uses JavaScript and the SVG API to generate a geometric piece inspired by Sol LeWitt. It shows a grid of black vertical bars overlaid with repeating diagonal patterns of black and white circles, creating a sense of systematic repetition. The code creates SVG elements directly with `document.createElementNS`, setting attributes to position 100 rectangles and multiple circle rings across the full viewport. No external libraries are used; the rendering is purely procedural, and the visualization is static, with no interactivity or data input.

Llieta96

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

84% match

Loading thumbnail…

Sol LeWitt Reproduction-Learning-pt1

This example reproduces a Sol LeWitt art piece using SVG, displaying a central circle where horizontal and vertical lines intersect against a contrasting background. The circle is highlighted with yellow horizontal stripes, while the surrounding area features red vertical lines. The code uses raw SVG APIs to construct masks, specifically `createElementNS` for elements like `rect`, `circle`, and `mask`, defining visible regions. Horizontal stripes are masked by a white circle, while vertical lines use a rectangular mask with a transparent cutout, creating the layered geometric composition.

Kkavitha G

83% match

Loading thumbnail…

Sol LeWitt Reproduction D3

This example reproduces a Sol LeWitt geometric art piece using only SVG and DOM manipulation, without any external libraries. It displays a grid of 100 horizontal and 100 vertical black rectangles on a full-screen canvas. Two circular masks—one with a black background and white circle, the other inverted—are applied to the horizontal and vertical strips respectively, creating an intersecting circular void in the center. The code uses `createElementNS` to construct SVG elements and `setAttribute` with `mask` URLs to achieve the layered effect.

Gguththered

82% match