Skip to main content
SimilarExport ZIP
100%

Ep3 using js and Sol Lewitt

✓ Published1🌍 Public
Rrashmi.s2055@gmail.com
Last edited Feb 11, 2025
Created on Feb 11, 2025
Forked from Ep3 using js

This interactive SVG composition, built with vanilla JavaScript and the DOM API, generates a grid-based abstract pattern inspired by Sol LeWitt. Vertical and horizontal translucent bars are drawn across the full viewport using `createElementNS`. SVG masks (`circle-mask` and `circle-mask-2`) are applied to these bars, revealing or concealing them within two circular regions centered on the canvas. The code defines a mask with a white circle on a black background to show the horizontal lines, while a second mask uses a black circle on a white background to show the vertical lines, creating a geometric interplay of shapes.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ep3 using d3 and Sol Lewitt

This visualization generates a grid of horizontal and vertical bars using D3.js, which are clipped by two circular masks to create a layered geometric composition reminiscent of Sol LeWitt’s wall drawings. The front set of bars appears within a central circle, while the background bars are visible outside that circle, achieved through SVG mask elements with contrasting fill colors. The code uses D3's `select`, `range`, and data join APIs to efficiently append and style the rectangles, with the entire layout sized to the browser window via `window.innerWidth` and `window.innerHeight`.

Rrashmi.s2055@gmail.com
90% match
Loading thumbnail…

Ep3 using d3 and Sol Lewitt diff share

This example uses D3.js in a React framework to generate an abstract geometric composition inspired by Sol LeWitt. It renders 100 horizontal and vertical rectangles as SVG elements, layered with two masking shapes—a star and a plus symbol—to create intersecting patterns. The code leverages D3 selections, `range()`, and `symbol()` to generate the shapes, while SVG masks control which parts of the grid remain visible. The visualization adapts to the full browser window and demonstrates a modular approach to procedural art.

Rrashmi.s2055@gmail.com
88% 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
86% match
Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This piece generates an animated SVG composition inspired by Sol LeWitt. Two overlapping grids of rectangles—vertical bars and horizontal stripes—interact with a central white circle. The vertical bars are randomly colored and drift upward via CSS-style animations applied through the SVG `animate` method. A mask restricts the horizontal grid to a circular region, creating a lens effect. Built with vanilla JavaScript and DOM manipulation, it uses no external libraries.

NNita
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
85% 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
85% match
Loading thumbnail…

Sol Lewitt Vanilla JS Project Attempt #2

This example generates an interactive Sol LeWitt-inspired drawing using only native JavaScript and SVG APIs, without external libraries. It shows a grid of thin horizontal and vertical lines across the full browser viewport, masked by two circles at the center. The first mask reveals horizontal bars within a dark circle, while the second mask inverts the effect for vertical bars in a contrasting ring, creating a crosshatched circular pattern that stands out against the plain background. The code creates elements dynamically via `document.createElementNS` and applies masks (`circle-mask`, `circle-mask-2`) to clip the repeated rectangles.

CCasualWanderer20XX
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