Skip to main content
SimilarExport ZIP
100%

Sole le witt variant

✓ Published1🌍 Public
Ccaitlin-woods
Last edited Oct 3, 2021
Created on Oct 3, 2021

A geometric SVG composition forms a circular pattern of intersecting horizontal and vertical bars on a black background. The visualization uses two SVG masks — one with a white circle on black and another with a black circle on white — to alternate bar visibility. Horizontal bars, each 10 pixels tall with gaps, appear inside the circle, while vertical bars, 10 pixels wide, appear outside it. The code directly manipulates the DOM via `document.createElementNS` and `setAttribute`, positioning elements based on `window.innerWidth` and `window.innerHeight`.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sole le witt variant full

This example generates two sets of horizontal and vertical bars that overlap to form a grid-like pattern, with a circular mask revealing the intersection of the layers. Horizontal bars are shown only inside the circle, while vertical bars appear only outside it, creating a contrast between the two regions. The visualization is rendered in SVG using D3 v6, with `range`, `select`, and `append` to construct the bars and masks, and relies on D3’s `mask` elements to define the visible areas. No external data is used; the composition is purely procedural.

Ccaitlin-woods
89% match
Loading thumbnail…

Sole le witt variant - D3

This work overlays two sets of horizontal and vertical bars, each with the same SVG mask, to create a circular window that reveals the bar pattern inside a defined radius. The code uses D3 version 6.6.1, specifically the `select`, `range`, and `join` APIs, to append SVG rectangles and define two masks with a circle. The visualization is rendered in SVG, with the bars drawn across the full width or height, and the masks configured to hide or show content within the circle.

Ccaitlin-woods
89% 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 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
79% match
Loading thumbnail…

Sol LeWitt Repro Vertical

This example reproduces a Sol LeWitt drawing using the SVG API. It displays a grid of horizontal and vertical black bars on a white background, creating an intersecting pattern. A circular mask reveals only the horizontal lines within its radius, while a second, inverted mask reveals only the vertical lines outside that same circle. The code constructs the masks and bars dynamically with `createElementNS` and `setAttribute`, using the document’s width and height for full-screen coverage.

SSam Hege
78% match
Loading thumbnail…

Fork of Fork of Sole le witt variant fullfullfull

A pattern of thin vertical and horizontal bars forms a grid across the full screen, with alternating rows and columns interrupted by large d3 symbol shapes. Two SVG masks, one inverted and one not, reveal different symbol sets drawn with d3.symbol and d3.range. The bars are rendered as rectangles positioned via d3 selection joins, while the masks filter which symbol patterns appear in each direction. The visualization uses d3 v6.6.1 with an SVG rendering approach, creating a layered, rhythmic composition from simple geometric elements.

Ccaitlin-woods
78% 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
78% 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
77% match