Skip to main content
SimilarExport ZIP
100%

Sol LeWitt in Vanilla JavaScript version Mar 27 2021

✓ Published0🌍 Public
NNita
Last edited Mar 27, 2021
Created on Mar 27, 2021

This visualization shows a colorful grid of small rectangles overlaid by a large white circle at the center, with a second layer of horizontal colored stripes masked into a circular shape. The SVG is built entirely with Vanilla JavaScript, using `document.createElementNS` for SVG elements. It creates 10,000 randomly colored vertical rectangles, then renders a white circle on top and a masked set of horizontal rectangles inside a circular region using SVG masks. The code uses `Math.random()` to generate RGB fill values, creating a generative art piece inspired by Sol LeWitt.

AI-generated description

Inspiration from Curran's live streaming

Started from scratch. Lot of research helps.

Exercise options:

Reproduce any Sol LeWitt piece.

Create generative art in the spirit of Sol LeWitt.

Add animation to what we’ve created (e.g. rotation).

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Vanilla JavaScript

This example reproduces a Sol LeWitt wall drawing using only Vanilla JavaScript and the SVG API. It constructs an SVG scene with a white rectangle and a black circle defined as a mask, then renders 100 horizontal stripes as individual SVG `<rect>` elements. Each rectangle’s visibility is filtered through the circular mask, creating the artwork’s characteristic banded composition within a circular boundary. The code dynamically sets the canvas to the browser’s full window dimensions and uses no external libraries or data sources.

Ppeter@attachmentdivision.com
88% match
Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript : Mar 29,2021 : group of circles, more circles

This visualization generates a grid of concentric circles using the SVG API, created dynamically with `document.createElementNS`. The code iterates over a 5100-by-5100 loop, placing each circle at a fixed 50-pixel interval, with a radius of 50 units, a black stroke, and no fill. The circles are appended directly to the SVG element, which is styled to fill the entire browser window. The example references Sol LeWitt’s geometric wall drawings, reproducing a systematic, repetitive pattern through vanilla JavaScript without any external libraries. The script includes commented-out alternatives for colored rectangles and masked grids, highlighting a modular approach to generative art.

NNita
88% match
Loading thumbnail…

Sol lewitt vanilla js

A generative art piece renders a grid of horizontal and vertical rectangles as SVG elements, creating a striped pattern across the full browser viewport. The layout uses two SVG masks to selectively reveal the stripes: a circular mask exposes a central disk of horizontal bands, while an inverse mask reveals the remaining area filled with vertical bands. Built with vanilla JavaScript and the SVG DOM API via `document.createElementNS`, the visualization constructs all shapes procedurally without any external libraries, directly manipulating attributes like `x`, `y`, `width`, and `height`.

Ddwikbtn
87% match
Loading thumbnail…

Sol LeWitt in Vanilla JavaScript (2)

This example reproduces a Sol LeWitt art piece using only vanilla JavaScript and the SVG API. It shows a grid of black vertical and horizontal rectangles intersecting within a central white area, created through layered masking. The code builds an SVG mask with a large white rectangle and a smaller black rectangle to hide portions of the vertical stripes, while a foreground mask with a white center reveals the horizontal stripes within the same central region. The rendering approach relies on programmatic SVG element creation and mask compositing.

Xxinyuwangxyw
87% match
Loading thumbnail…

Sol LeWitt in Vanilla JS

This example renders a generative art piece inspired by Sol LeWitt using vanilla JavaScript and SVG. It creates a full-screen SVG canvas and populates it with a series of vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the entire window width. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements dynamically, looping to cover the viewport’s width. The result is a minimal, grid-based composition that directly translates the artist’s geometric aesthetic into a browser-based visualization.

Jjv
87% match
Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript : Mar 27,2021 : group of circles, more circles

A grid of 10,000 unfilled black-outlined circles, each with a radius of 10 pixels, is arranged in a 100-by-100 pattern across the full browser window. The circles are rendered as SVG elements created dynamically with vanilla JavaScript, using `document.createElementNS` and setting `cx`, `cy`, `r`, `stroke`, and `fill` style properties. The code includes commented-out variations featuring random colored fills and masked rectangular grids, but the active visualization strictly displays the uniform circle grid. The piece references Sol LeWitt’s generative art style, with the rendering approach visible through direct SVG manipulation rather than any external library.

NNita
87% match
Loading thumbnail…

Sol LeWitt

This example reproduces a Sol LeWitt drawing using SVG. It renders a grid of horizontal and vertical stripes, with a circular mask creating the illusion of layered bands across the canvas. The stripes are generated programmatically in JavaScript, using `document.createElementNS` to build SVG `rect` elements. Two complementary masks (`circle-mask` and `circle-mask-2`) alternate which stripe orientation is visible, producing a clean geometric composition that adapts to the full browser window size.

Aainhoadieruiz@gmail.com
86% match
Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript : Mar 27,2021 : group of circles, more circles

This visualization reproduces a Sol LeWitt art piece as a dense 100×100 grid of randomly colored 10-pixel squares, filling the entire browser window. The code uses vanilla JavaScript to create SVG elements via the DOM API, setting each rectangle’s fill to a random RGB value. Though commented-out sections hint at alternative circle-based or masked-grid variations, the active code renders only the colorful square grid, with no interaction or animation.

Ccssergio
86% match