Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction-adding svg background color

✓ Published0🌍 Public
Kkavitha G
Last edited Nov 21, 2022
Created on Nov 21, 2022

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.

AI-generated description

A reproduction of a Sol LeWitt art piece.

link of blog

MIT Licensed

Similar vizzes

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
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

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
89% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using raw SVG and JavaScript, showing a grid of vertical lines confined to a circular region at the center of the screen. The code creates an SVG mask with a white rectangle and black circle, then applies that mask to a series of thin vertical rectangles spaced every 20 pixels across the viewport. The result is a minimalist geometric composition where the line grid is visible only inside the circular window, mimicking LeWitt’s systematic drawing style.

Mmegan-grannan
88% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using raw JavaScript and the SVG API. It generates a grid of horizontal and vertical stripes, masked by two inverse circular masks to create a composition of intersecting lines. The code directly creates SVG elements via `document.createElementNS`, setting attributes for rectangles and masks to control the visible pattern. The rendering is dynamic, adapting to the browser window's full width and height.

DDilara Bozkurt
88% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing using only raw SVG and JavaScript, with no external libraries. It displays a grid of alternating horizontal and vertical lines that remain visible only within two intersecting circular masks, creating a dynamic visual interplay between the line directions. The code builds the SVG dynamically by appending a set of horizontal rectangles masked by a black/white circle, and vertical rectangles masked by an inverse circle, both centered on the screen. The rendering relies on native SVG mask elements and DOM manipulation in plain JavaScript.

MMaras13
88% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using dynamically generated SVG elements. It displays a grid of horizontal and vertical lines whose visibility is constrained by two circular masks: one reveals the horizontal lines inside a circle, while the other reveals vertical lines outside the same circle. The code uses the SVG `mask` and `mask` attribute to layer the intersecting line patterns. All elements are created programmatically with `document.createElementNS`, and the layout responds to the window’s dimensions. The artwork relies entirely on SVG primitives, without external libraries.

IIsabella Reyna
88% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization shows a geometric composition of thin horizontal and vertical lines forming a cruciform pattern, with darker bands where the strokes overlap. It uses a circular mask to hide line ends, creating a clean, clipped boundary around the central region. The code builds the SVG structure entirely with JavaScript APIs, including `document.createElementNS` and `setAttribute`, and applies two SVG masks (`circle-mask` and `circle-mask-2`) to alternate the visibility of the two line sets. The work is an algorithmic reproduction of a Sol LeWitt drawing, driven purely by nested loops and hard-coded dimensions.

AAnuja Panthari
88% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This fork reproduces a Sol LeWitt wall drawing using dynamically generated SVG elements. It shows a grid of thin horizontal and vertical black lines intersecting within two overlapping circular masks, creating a geometric pattern where line density varies. The code uses the SVG DOM API to create `<rect>` elements, `<mask>` definitions, and `<circle>` shapes without any external libraries. The visualization generates 100 horizontal and 100 vertical stripes, each clipped by a complementary mask to produce the circular cutout effect against the full viewport.

SSamuel Aregbesola
88% match