Sol lewitt vanilla js

100%

Sol lewitt vanilla js

✓ Published1🌍 Public

Last edited Aug 9, 2022

Created on Aug 9, 2022

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`.

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

91% match

Loading thumbnail…

JS VANILLA SOL LEWITT

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.

Rrespingu

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

88% match

Loading thumbnail…

Sol Lewitt

A generative art visualization recreates Sol LeWitt’s geometric style by layering 100 horizontal and 100 vertical striped rectangles over the full viewport. Two SVG masks combine to create a central circular window: the horizontal stripes are visible inside a white circle, while the vertical stripes appear outside it. The code builds the SVG programmatically using standard DOM APIs such as `createElementNS` and `setAttribute`, with masks (`mask`, `mask2`) controlling the blend of the two line grids.

Aadonisacruz0@gmail.com

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

88% match

Loading thumbnail…

Sol Lewit Repro

This example presents a generative art piece inspired by Sol LeWitt, rendered by drawing a series of vertical stripes across the full browser window. The visualization uses raw JavaScript with the Document Object Model (DOM) API, specifically creating Scalable Vector Graphics (SVG) elements via `document.createElementNS`. The code generates 100 rectangles, positioning each one along the x-axis with a fixed width and making them stretch the entire height of the viewport, resulting in a clean, minimal striped pattern that echoes LeWitt's systematic wall drawings. The artwork automatically adapts to the current window dimensions.

HHayden-V

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

87% match