JS VANILLA SOL LEWITT

100%

JS VANILLA SOL LEWITT

✓ Published1🌍 Public

Last edited Sep 22, 2022

Created on Sep 22, 2022

This visualization generates an abstract grid of thin vertical and horizontal rectangles rendered as SVG. It combines a Sol LeWitt-inspired geometric pattern with masking techniques, where a central circular mask reveals a crosshatched composition while another mask inverts the effect. The code uses D3.js selections and data joins to create 100 rectangles per axis, with masks defined via D3’s append method. Static SVG elements are positioned based on window dimensions, producing a minimalist, generative art piece.

AI-generated description

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

Similar vizzes

Loading thumbnail…

JS VANILLA SOL LEWITT

This example creates a generative geometric composition inspired by Sol LeWitt using vanilla JavaScript and SVG. It renders 100 vertical and 100 horizontal rectangular strips, each 10 pixels wide or tall, across the full viewport. The strips are masked using two SVG `mask` elements: a circle mask for horizontal rectangles and a rectangle mask with a circular hole for vertical ones. The result is a grid of lines that appears only within a central circle, with the surrounding area showing the full-width vertical stripes. The code builds all elements dynamically via `document.createElementNS`.

Rrespingu

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

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

88% match

Loading thumbnail…

Sol Lewitt in Vanilla JS

This piece reproduces a Sol Lewitt art concept using a generative, animated SVG composition. It displays a rotating triangular mask that reveals or conceals a grid of horizontal and vertical lines, creating a dynamic interplay of shapes. Rendered entirely in vanilla JavaScript, the code dynamically creates SVG elements via `createElementNS`, building a responsive full-window graphic. The animation is driven by CSS keyframes, while two distinct SVG masks, one inverting the other, control the visibility of the line grid, producing a clean, geometric visual effect.

JJaga-droid

86% match

Loading thumbnail…

Sol LeWitt in Vanilla JavaScript version 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.

NNita

86% match

Loading thumbnail…

SolLeWitt in VanilaJS

This example generates a geometric composition inspired by Sol LeWitt using only vanilla JavaScript and the SVG DOM API. It creates an SVG canvas sized to the viewport, then draws alternating horizontal and vertical bars whose visibility is controlled by two circular masks. The top mask applies a black circular cutout over white bars, while the bottom mask uses a white circle to reveal underlying horizontal bars, producing an intersecting circular pattern. The code relies on `document.createElementNS` and `setAttribute` for all SVG elements, with no external libraries.

JJun Alvarado

85% match

Loading thumbnail…

Sol LeWitt

This example renders a generative composition inspired by Sol LeWitt using raw SVG creation via JavaScript. It constructs a full-screen SVG and uses two masks to create a circular cutout: one mask reveals vertical stripes outside the circle, while another reveals horizontal stripes inside it. The code manually creates SVG elements using the `document.createElementNS` API and sets attributes directly, without using any external libraries. The result is a static, geometric pattern of 100 vertical and 100 horizontal rectangular stripes that alternate based on their position relative to the central circle.

JJamie

85% match

Loading thumbnail…

Sol LeWitt

This example generates a minimalist SVG composition inspired by Sol LeWitt, displaying 100 vertical rectangles evenly spaced across a 960-by-500-pixel canvas. Each rectangle maintains a fixed width of 10 pixels and spans the full height of the canvas, creating a rhythmic, striped pattern. The visualization is built programmatically using raw JavaScript and the SVG API, specifically creating SVG elements via `document.createElementNS` and appending them to the document. No external libraries are used; the rendering relies entirely on native browser support for SVG and scripting.

NNikki Masroor

85% match