Skip to main content
SimilarExport ZIP
100%

Sol LeWitt mascara circular

✓ Published1🌍 Public
SSergio
Last edited Sep 2, 2025
Created on Sep 2, 2025

A circular area in the center of a web page displays a pattern of 30 horizontal white bars, while the surrounding space remains black. The effect is achieved using Scalable Vector Graphics (SVG) masking, where a white circle reveals the bars inside, and a black background rectangle hides them outside. Built with Vue.js, the code dynamically creates the SVG elements using the JavaScript DOM API.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt dos mascaras

This example generates a dynamic, Sol LeWitt-inspired abstract composition using an SVG mask API. Two masks invert visibility: the first reveals a circle of horizontal stripes, while the second displays vertical stripes within a donut-shaped region. The code uses pure JavaScript and the Document Object Model (DOM) to create SVG elements, including `<mask>`, `<circle>`, and `<rect>` tags, without any external libraries. Rendering relies on the viewport’s width and height to size the artwork, which appears as an interplay of masked rectangular stripes.

SSergio
84% match
Loading thumbnail…

Sol LeWitt Horizontal Cirle

A web page renders a dynamic, mask-based homage to Sol LeWitt's geometric art. The visualization displays a central circle composed of horizontal and vertical striped bands, created using SVG elements and CSS mask compositing. It draws 100 horizontal rectangles masked by a circular region, and 100 vertical rectangles masked by an inverse circle, all generated procedurally with JavaScript. The `document.createElementNS` API constructs SVG nodes, while `mask` and `circle` elements define the visible shape, resulting in a crisp, monochrome pattern that fills the browser viewport.

Eeric.r.thornhill@gmail.com
81% 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
81% 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
80% 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
80% match
Loading thumbnail…

Sol LeWitt horizontal

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.

NNico-Nico
79% 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
79% match
Loading thumbnail…

Sol LeWitt Reproduction Mask

This visualization reproduces a Sol LeWitt art piece using a simple SVG mask to create a circular viewing window. It shows a series of horizontal black-and-white striped bars filling the entire screen, stopped by a central circular hole that reveals the full rectangle. The code builds an SVG via DOM manipulation, defines a mask containing a white rectangle and black circle, then appends 100 thin rect elements with the mask applied to create the striped pattern. The rendering relies on core SVG APIs and no external libraries.

AAndre J Denais
79% match