Skip to main content
SimilarExport ZIP
100%

patterns masked

✓ Published1🌍 Public
Gguts
Last edited Oct 3, 2023
Created on Oct 3, 2023

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of patterns masked

This example uses SVG masks to create a geometric pattern of horizontal and vertical stripes that disappear within a circular region. Two complementary masks (`circle-mask` and `circle-mask2`) control which stripes are visible, with the horizontal lines masked by a black circle and the vertical lines masked by its inverse. All elements are created dynamically using the native `document.createElementNS` API, rendering 100 rectangles in each direction without any external libraries.

Gguts
85% match
Loading thumbnail…

new Shapes SVG Fundamentals

This example demonstrates how SVG masks can selectively reveal or hide overlapping grid lines. It renders horizontal and vertical stripes as SVG `rect` elements, each assigned a mask containing a black background and a white circle to create a transparent window. A second mask with inverted colors overlays the vertical stripes, producing a crosshatched pattern visible only within the circular region. The visualization is built using the raw `document.createElementNS` API to construct SVG elements dynamically in a loop, with the window size set to the full browser viewport.

Ssubratanp
82% match
Loading thumbnail…

design done

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.

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

mask experiments

This example demonstrates the interplay of two complementary SVG masks. It first shows a set of horizontal stripes visible only within a circular window, then displays vertical stripes that are hidden inside the circle while remaining visible outside it. The piece creates a stark geometric contrast between the two masked regions. The visualization is generated entirely with the SVG `mask` element and basic `rect` and `circle` primitives, using white and black fills to define luminosity. The code dynamically constructs one hundred stripes for each orientation, with the masks applied via URL references to `#circle-mask` and `#circle-mask-2`.

Sscheenmi@gmail.com
82% match
Loading thumbnail…

multi masks

This example creates an abstract pattern of 100 horizontal and 100 vertical stripes overlaid on an SVG canvas, with each stripe masked by one of two complementary masks. The masks are defined using D3’s `mask` element, where black and white rectangles and symbol shapes (from `d3.symbol`) determine visibility. The code uses D3 selections and `join` to bind data from `d3.range`, and applies masks via `attr('mask', 'url(#mask-1)')`. The result is a woven, crosshatched visual effect generated entirely in the browser.

JJetlinZ
81% match
Loading thumbnail…

svg mask

This example demonstrates the visual effect of SVG masks by layering horizontal and vertical stripes over a full-viewport canvas. It creates two circular masks, one with a white circle on a black background and the other with a black circle on a white background, then applies them to alternating sets of 50 thin rectangles. The code builds the entire scene programmatically using the Document Object Model (DOM) methods such as `createElementNS` and `setAttribute`, without any external libraries, and renders everything directly in SVG.

Sserebryanaya.n@gmail.com
80% match
Loading thumbnail…

Visualization

This visualization creates a striped pattern of horizontal and vertical bars that are selectively revealed through two SVG masks. The masks use alternating black-and-white rectangles and D3 symbols to alternate visibility of the grid lines, producing an overlapping geometric composition. Built with D3 v7, the code uses `select`, `range`, `scaleBand`, and `symbol` to generate the shapes, while `append('mask')` and `attr('mask', ...)` control the clipping. The rectangles are sized based on `window.innerWidth` and `window.innerHeight`, with the pattern repeated 120 times across the screen.

DDaniel R Handoko
80% match