Skip to main content
SimilarExport ZIP
100%

design done

✓ Published1🌍 Public
AAkshay
Last edited Nov 17, 2022
Created on Nov 17, 2022

A grid of alternating horizontal and vertical striped rectangles covers the full screen, with a circular mask revealing an intersection of both orientations. The visualization uses raw SVG elements created via the DOM API, applying `mask` and `circle` elements to clip each stripe. A white circle in the first mask hides the horizontal bands except within its bounds, while the second mask uses a black circle on a white background to invert the effect for the vertical strips, producing a crisp radial pattern at the center.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

circle mask

A full-screen SVG displays 100 horizontal stripes alternating in height across the viewport, with a circular mask revealing only the central region. The mask is defined as an SVG `<mask>` containing a white rectangle and a black circle, applied to each stripe via the `mask` attribute. The visualization uses raw DOM manipulation with `document.createElementNS` and `setAttribute` to construct the SVG elements dynamically in JavaScript, without any external libraries.

AAkshay
84% match
Loading thumbnail…

inverse masking done

This example demonstrates inverse masking with SVG, where intersecting horizontal and vertical striped rectangles reveal a circular cutout at the center. Two masks are defined: one with a white circle on a transparent background, and another with a black circle over a white rectangle. The code builds 100 horizontal and 100 vertical rectangle strips, applying each mask to create a cross-hatch effect where the circle appears transparent. It uses plain JavaScript to manipulate SVG elements directly, with the `<mask>` element and `url(#...)` references controlling visibility.

AAkshay
82% 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
82% match
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
81% match
Loading thumbnail…

vertical and horizontal

This example generates a full-screen grid of red vertical and horizontal bars, but uses an SVG `<mask>` to reveal only a circular region at the center of the canvas. A white rectangle inside the mask covers the entire viewport, while a black circle cuts out the visible area, clipping the bars to that shape. The code builds the SVG elements directly with `document.createElementNS` and uses the Google Fonts "Archivo" and "IBM Plex Sans" for styling. The result is a crisp, geometric pattern with a circular window.

Cclara7227
81% match
Loading thumbnail…

Reproduction

This visualization reproduces a geometric pattern using two overlapping circular masks to control the visibility of horizontal and vertical strips. The rendering relies on core SVG APIs, including `document.createElementNS` for constructing elements and `mask` definitions that hide or reveal rectangular bands across the canvas. One mask exposes a central circular region for the horizontal bars, while the inverse mask reveals vertical bars outside that circle. The result is a clean, intersecting grid pattern, implemented purely with JavaScript and SVG without external libraries.

Aahora
81% 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
80% match
Loading thumbnail…

Sol LeWitt

This visualization reproduces Sol LeWitt’s geometric style using overlapping horizontal and vertical stripe patterns. It shows a large circular mask that reveals alternating bands of stripes against a contrasting background. The code uses raw SVG elements via `document.createElementNS` to construct rectangles, masks, and circles. A single white circle and black circle are combined with two masks to clip the stripe layers, creating an interplay of positive and negative space. The rendering relies on SVG’s mask attribute and fills the full viewport with 100 stripes in each direction.

Ddalia.miliauskaite@me.com
80% match