Sol LeWitt in vanilla js exercise

100%

Sol LeWitt in vanilla js exercise

✓ Published0🌍 Public

Last edited Apr 19, 2023

Created on Apr 19, 2023

Forked from Fork of Sol LeWitt in vanilla js vertical

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.

AI-generated description

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

Similar vizzes

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

89% match

Loading thumbnail…

Sol LeWitt reproductin 2

This example reproduces a geometric artwork by Sol LeWitt using SVG masks to create a triangular region filled with alternating black and white stripes. The visualization shows a large triangle centered on the screen, composed of vertical white bars crossing over it and horizontal black bars elsewhere. The code generates SVG elements dynamically via the DOM API, defining two masks—one for the triangle’s interior and one for its exterior—to control where each stripe set is visible. The result is a crisp, tiled pattern that fills the entire viewport.

IIgorGorin00

88% match

Loading thumbnail…

Sol LeWitt

This example generates three full-screen SVG compositions of overlapping horizontal and vertical striped rectangles, each masked into a distinct geometric shape: a circle, a triangle, and a rectangle. Using D3 v7, it constructs 100 thin bars per axis and applies SVG masks to reveal only the portions inside each shape. The code combines D3’s selection and join methods with custom mask definitions and symbol paths, such as `d3.symbolTriangle`, to render the layered patterns in the browser.

Aadonisacruz0@gmail.com

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

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

86% 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 vertical

This visualization presents a generative art piece inspired by Sol LeWitt's geometric style. It displays a series of vertical black bars distributed across the canvas, but the pattern is interrupted by a central circular region. The circle acts as a mask, selectively revealing or hiding portions of the bars within its radius. The code uses raw SVG and JavaScript, creating elements via `document.createElementNS`, setting a mask with a circle shape, and dynamically generating the bars in a loop. The display is adjusted to fill the browser window's dimensions.

NNico-Nico

86% match

Loading thumbnail…

Sol Lewitt All Shapes

This example reproduces a Sol LeWitt-inspired drawing using overlapping geometric masks. The visualization displays a grid of black bars (vertical and horizontal) that intersect with two rows of outlined circles, created by applying two distinct SVG masks—one inverted and one not—to the bar patterns. The code uses D3.js (v6) to dynamically generate the scene, calculating bar placement based on the browser window’s dimensions. It leverages D3’s `selectAll`, `range`, and `join` methods to efficiently append and configure SVG elements, while `d3.symbol` generates the circle paths. The rendering is fully SVG-based within a React-free environment.

JJoel Wilson

86% match