Fork of Sol LeWitt reproduction

100%

Fork of Sol LeWitt reproduction - adding color and animation

✓ Published0🌍 Public

Last edited Oct 28, 2022

Created on Oct 28, 2022

This interactive web piece revives a Sol LeWitt wall drawing as a generative, animated SVG artwork. It displays layered horizontal and vertical lines whose colors and inner circular mask radius continuously shift through a red-orange-yellow palette. The work is built with plain JavaScript and the SVG DOM API, using generated `rect` and `circle` elements with CSS `@keyframes` animations to choreograph the color and radius changes.

AI-generated description

A reproduction of a Sol LeWitt piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

This example reproduces a Sol LeWitt wall drawing as an interactive web visualization. It shows a grid of narrow horizontal and vertical lines that intersect, with a circular area in the center where the lines disappear. The piece is built using raw SVG manipulation in JavaScript, creating two masks—one with a black rectangle and white circle, another with a white rectangle and black circle—to selectively hide line segments. Horizontal and vertical rectangles are then generated in a loop and assigned to these masks, producing the final composition. The code uses the SVG namespace API and basic DOM methods.

DDzenad

87% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This piece recreates a Sol LeWitt drawing as an interactive web graphic, showing a grid of sharp horizontal and vertical lines that intersect inside a central circular window. The artwork displays a stark contrast: dense, parallel line bands form a square field, while the circular area isolates a clean, empty center. The rendering uses JavaScript to dynamically build an SVG, creating layered rect elements and applying two distinct SVG masks to control which lines appear within the circle. This direct manipulation of SVG nodes and mask definitions produces the geometric, mask-based visual effect.

MMark Butcher

86% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This interactive piece reproduces a Sol LeWitt drawing using generative code. It creates a dynamic geometric composition of rotated SVG rectangles, layering them to form a subtle optical pattern across the browser window. A black triangle is positioned in the center, grounding the abstract lines. The piece uses the SVG API to dynamically create and append elements, including a custom `tri` polygon, with the rectangles rotated at 45 and 315 degrees. The code generates the artwork programmatically through JavaScript, using window dimensions for scaling.

Jjustinhersom@gmail.com

86% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This generative art piece reproduces a Sol LeWitt wall drawing using pure JavaScript and the SVG API. It displays a grid of alternating horizontal and vertical stripes that intersect within central circular masks, creating a layered geometric pattern. The code constructs an SVG canvas with two circle masks—one revealing horizontal bars, the other vertical bars—overlaid to produce the final composition. No external libraries are used; all elements are created dynamically via `document.createElementNS` and styled with inline attributes.

Kktshim@snu.ac.kr

85% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This is a generative art piece that reproduces a Sol LeWitt wall drawing using JavaScript and the Document Object Model (DOM) to create SVG elements. It shows a grid of horizontal and vertical lines, with a central circular region where the line pattern is inverted. The code uses a combination of SVG masks with white and black circles to control which sets of lines are visible in the center versus the rest of the canvas. The lines are drawn as rectangular strips, with spacing and stroke width derived from the browser window's dimensions.

SSalahAnwer-dev

84% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This is a fork of a Sol LeWitt reproduction that creates an animated SVG artwork using D3.js. It renders a grid of horizontal and vertical lines masked by two intersecting circular regions. A button toggles the animation, which modulates the circle radii, line opacities, and circle positions using sine and cosine functions via `setInterval`. The piece uses D3's `select`, `range`, and `join` APIs to build the SVG elements.

224cs049@kpriet.ac.in

84% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction-adding svg background color

A browser-based reproduction of a Sol LeWitt wall drawing uses raw SVG and JavaScript to generate geometric line art. Two groups of thin horizontal and vertical lines are drawn across the full window, with circular masks applied so the lines only appear inside a central circle. A yellow background rectangle fills the screen, while brown vertical lines contrast with the default black horizontal strokes. The code builds the SVG DOM manually using `document.createElementNS` and `setAttribute`, without relying on any external visualization library.

Kkavitha G

84% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt geometric art piece using a dynamic SVG composition of horizontal and vertical bands. It displays a grid of thin colored rectangles that form a distinct circular pattern through the use of two SVG masks, creating a visual interplay between the line orientation and the masked circle. The code builds the entire scene programmatically with the raw SVG API, generating 100 horizontal stripes and 100 vertical stripes in a loop. A circular mask reveals the horizontal lines against a fully visible background, while a second, inverse mask isolates the vertical lines within the same circle, producing the artwork’s layered effect.

Aadriana-ss

84% match