Untitled

100%

✓ Published0🌍 Public

Last edited Jun 8, 2022

Created on Jun 8, 2022

A grid of thin, vertical rectangles is masked by a white circle at the center of the canvas, leaving the circle’s interior free of these lines. A second set of thin, horizontal rectangles is also masked by the same circular region. The code creates SVG elements directly using the DOM API, generating 100 vertical and 100 horizontal rectangles. Each set uses an SVG `<mask>` with a circle to clip the rectangles, revealing an empty circular area against the lines.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example renders horizontal and vertical alternating stripes masked by two circles in the center of an SVG canvas. The code uses raw SVG manipulation via `document.createElementNS` to construct masks, rectangles, and elements, with `d3` available as a dependency but not actively used. The first mask reveals horizontal stripes, while the second mask inverts the circle to show vertical stripes outside it, creating a crosshatched visual pattern that fills the viewport. The visualization demonstrates layered SVG masking techniques without data input.

DDuckGorilla

82% match

Loading thumbnail…

svg fund

A grid of 100 thin horizontal rectangles spans the full width of the viewport, but a circular mask reveals only the central portion of this striped pattern. The visualization demonstrates how SVG masks work by layering a white circle on a black background to selectively hide or show the underlying marks. Built with D3’s `select`, `range`, and `join` methods, the code appends rectangles with a shared `mask` attribute, then constructs the mask using SVG `mask` and `circle` elements. The data is a simple sequential range, and the circle is centered at half the window’s dimensions.

LLamaab02

79% match

Loading thumbnail…

Sol Lewitt Project

This example generates a geometric abstraction inspired by Sol LeWitt, layering horizontal and vertical striped rectangles over an SVG canvas. Two circular masks create a contrast where a central white circle reveals the full pattern, while the surrounding area inverts it. Using D3’s `select` and `range`, it appends over one hundred rect elements per axis, with widths and heights derived from window dimensions. The SVG `mask` elements, defined with white and black circles, control visibility, producing a precise, grid-based visual composition.

JJohnny Dodge

79% match

Loading thumbnail…

patterns masked

A grid of horizontal and vertical stripes is partially revealed through a circular mask, creating a layered pattern where the lines cross and overlap within the masked region. The visualization uses raw SVG APIs, including `document.createElementNS` to construct rectangles and a mask with a circle, alongside `setAttribute` to position elements. The stripes form a woven texture, and the mask highlights a central focal area while leaving the surrounding space empty.

Gguts

78% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example creates a grid of thin horizontal and vertical rectangles using SVG, with two circular masks that reveal and hide portions of the lines. The pattern is generated through two loops that position 100 rectangles each, alternating their orientation. SVG mask elements define the visible area: one mask exposes a central circle of horizontal lines, while the other inverts the circle to show vertical lines outside the center. The rendering uses native JavaScript DOM manipulation via `createElementNS` to build the SVG structure dynamically, with no external libraries.

Zzaioris

78% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing entirely with SVG shapes, using two circular masks to create a layered grid of horizontal and vertical lines. A black-and-white mask limits the first set of 100 horizontal rects to a centered circle, while an inverted mask applies 100 vertical rects to the surrounding area. The code builds the scene dynamically via the DOM API (`createElementNS`, `setAttribute`), populating the SVG canvas across the full window size. No external libraries are used, relying purely on native SVG masking and rectangle elements.

Iinnocent thomas

78% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript, displaying a grid of narrow horizontal rectangles that become visible only within a central circular mask. The code creates an SVG canvas via `document.createElementNS`, defines a mask with a single circle, and generates 100 stacked `<rect>` elements, each 10 pixels tall, that intersect the mask to form the final composition. The result is a precise, minimal geometric pattern whose vertical bands are revealed through the circular aperture, mimicking the clean, systematic aesthetic of LeWitt's wall drawings without any external libraries.

AAndre J Denais

77% match

Loading thumbnail…

Sol LeWitt Reproduction D3

This example reproduces a Sol LeWitt geometric art piece using only SVG and DOM manipulation, without any external libraries. It displays a grid of 100 horizontal and 100 vertical black rectangles on a full-screen canvas. Two circular masks—one with a black background and white circle, the other inverted—are applied to the horizontal and vertical strips respectively, creating an intersecting circular void in the center. The code uses `createElementNS` to construct SVG elements and `setAttribute` with `mask` URLs to achieve the layered effect.

Gguththered

77% match