Sol LeWitt horizontal

100%

Sol LeWitt horizontal

✓ Published1🌍 Public

Last edited Jan 9, 2023

Created on Jan 9, 2023

This example renders a generative art piece inspired by Sol LeWitt, composed of horizontal and vertical black bars that intersect within a circular area of the canvas. The visualization uses the raw DOM API `document.createElementNS` to construct SVG elements directly, applying two distinct masks (`circle-mask` and `circle-mask-2`) to confine the bars to a central circle and to create a crosshatch pattern. The page is built with HTML, CSS, and JavaScript, with the SVG sized to the full browser window and the Share Tech font loaded from Google Fonts.

AI-generated description

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

Similar vizzes

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

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

93% match

Loading thumbnail…

Sol Lewitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing using SVG, rendering 100 horizontal bars masked by a central circle. The code builds the visualization dynamically with the `document.createElementNS` API, creating a white rectangle and black circle to define the mask, then looping through the bars. Each bar is 10 pixels tall, spaced 20 pixels apart, and clipped by the `url(#circle-mask)` reference. The visualization fills the entire browser window, with the mask and bars sized based on `window.innerWidth` and `window.innerHeight`, producing a geometric composition of stripe-like shapes.

HHéloïse Feldmann

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

88% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style drawing using SVG, layering horizontal and vertical bands that are clipped by circular masks. The piece shows a 200-pixel radius circle centered on the canvas, where alternating stripes of a solid hue and the page background are exposed through two distinct mask configurations. The first mask reveals the horizontal bands within the circle, while the second reveals the vertical bands outside it, creating an optical interplay. The code uses JavaScript’s `document.createElementNS` to generate SVG elements, setting attributes like `width`, `height`, and `mask` directly on each shape.

MMonWas

88% match

Loading thumbnail…

SVG Sol LeWitt vertical

This example generates an SVG visualization inspired by Sol LeWitt’s geometric wall drawings. It shows a grid of alternating horizontal and vertical black stripes that are visible only within a circular mask centered on the screen. The code uses the Document Object Model’s `createElementNS` method to construct SVG elements, including a mask containing a circle, and appends 48 horizontal and 48 vertical rectangles. The rectangles are clipped by the mask via the `url(#circle-mask)` reference, producing a circular cutout effect against a full-window backdrop.

Mmax-31

88% match

Loading thumbnail…

Sol LeWitt

This example renders a generative SVG artwork inspired by Sol LeWitt. It uses raw JavaScript to create an SVG element sized to the browser window, then draws 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the canvas. A circular mask, defined in SVG and applied via the `mask` attribute, clips these rectangles, revealing a bold, striped disk centered on the screen. The piece demonstrates programmatic shape creation and SVG masking without any external libraries.

Bbillzhou2005

88% match