Skip to main content
SimilarExport ZIP
100%

SolLeWitt in VanilaJS

✓ Published0🌍 Public
JJun Alvarado
Last edited Aug 17, 2022
Created on Aug 17, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt in Vanilla JavaScript

This example recreates a Sol LeWitt wall drawing using only Vanilla JavaScript and the SVG API, with no external libraries. The SVG dynamically adapts to the browser window’s dimensions, generating a composition of alternating horizontal and vertical bars. It uses SVG `<mask>` elements with circles to clip the bar patterns, revealing a circular region in the center where the orientation of the lines shifts, mimicking the geometric interplay found in LeWitt’s conceptual art. The code builds all shapes procedurally via `createElementNS`.

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

Sol LeWitt

This example recreates an abstract Sol LeWitt-inspired drawing using only DOM APIs. It shows a grid of thin horizontal and vertical bars overlaid with a circular mask, so the bars are visible only inside the circle. The code builds SVG elements dynamically with `document.createElementNS` and uses two SVG `<mask>` elements to define the visible region. Each bar is a `<rect>`; the horizontal set uses a mask that hides the center, while the vertical set uses an inverted mask, creating a subtle layered composition.

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

Sol LeWitt combined

This example renders a generative art piece inspired by Sol LeWitt, displaying a grid of vertical black bars on a white background. A circular mask, defined via SVG’s `<mask>` element, restricts the bars to appear only within a centered circle, creating a stark, geometric contrast. The code uses raw JavaScript and SVG APIs (`document.createElementNS`, `setAttribute`) to construct the shapes dynamically, with the mask composed of a white rectangle and a black circle. The bar spacing and width are fixed by loop parameters, producing a repeating pattern across the full viewport.

NNico-Nico
89% match
Loading thumbnail…

Sol LeWitt in vanilla js exercise

This interactive SVG artwork, inspired by Sol LeWitt, uses intersecting triangular masks to create a dynamic, layered composition of colorful bars. The page renders two distinct geometric patterns: horizontal bands of random widths and colors from a rainbow palette, and vertical elements, all clipped by black and white triangle masks. Built with vanilla JavaScript and the SVG DOM API, the visualization responds to user interaction, with the primary triangle performing a slow rotation animation on hover.

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

Sol LeWitt Repro w/ vanilla JS

A full-screen SVG reproduction of a Sol LeWitt wall drawing displays two interlocking sets of thin vertical and horizontal bars. A central circular mask inverts the visibility of the two grids, creating a stark contrast between the denser vertical lines inside the circle and the horizontal lines outside. The piece is built with vanilla JavaScript, dynamically creating SVG elements and applying mask definitions without any external libraries. The code generates one hundred vertical and one hundred horizontal rectangles, using the `mask` attribute to alternate their visibility based on the circle’s boundary.

Hhelloelectro
88% match