Always Ayak

100%

✓ Published1🌍 Public

Last edited Apr 17, 2023

Created on Feb 2, 2023

Two intersecting sets of thin SVG rectangles form a dense horizontal-and-vertical grid across the full browser window. A circular mask reveals only a central disk of this pattern, creating a moiré-like focal point against a plain background. The visualization is built with D3 v6, using `select`, `range`, and `data` joins to generate one hundred rectangles in each direction. The second mask inverts its fill to reverse the visible region, all rendered dynamically to the viewport's dimensions via `window.innerWidth` and `innerHeight`.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 JS

An SVG grid of 100 horizontal and 100 vertical rectangles covers the full viewport. Two circular masks, defined via D3's `mask` element, create a lens-like effect: the first mask exposes a central white circle outlined by black-filled rectangles, while the second inverts the fill to produce a complementary pattern. Using D3 v7's `join` method, the code binds `d3.range` data to generate the rectangles, with each strip sized 10 pixels thick and spaced 20 pixels apart. The overlapping masks reveal alternating stripe orientations, forming a dynamic moiré-like crosshatch within the central circular region.

TTehran Mammadov

78% 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

78% match

Loading thumbnail…

some

This example generates a geometric pattern of horizontal and vertical stripes across the full browser window, using D3.js version 7.9.0 to create SVG rectangles. Two circular masks reveal the stripes: the first mask shows horizontal lines within a white circle on black, while the second displays vertical lines in the inverse, creating an intersecting visual effect. The code uses D3's `select`, `range`, and `.join` API to efficiently append and position 100 rectangles in each direction, with the masks defined as separate SVG elements.

AAdityan Nainar

76% match

Loading thumbnail…

SVG + D3

A full-screen SVG pattern of 100 horizontal and vertical bars alternates in opacity according to two circular masks, revealing a central disc and its inverse. Using D3 v7, the code appends `rect` elements via `selectAll().data().join()`, sizing them by window dimensions. The masks are defined in SVG by combining a background `rect` with a `circle`, where white reveals and black conceals.

MMarta

75% match

Loading thumbnail…

D3 beginning

This example shows a grid of thin horizontal and vertical rectangles that intersect to form a visible weave pattern, with a circular region in the center where the crossing lines appear to invert in contrast. The visualization uses D3 v6’s `select` and `range` functions to generate 100 rectangles in each direction, appended as SVG elements across the full window width and height. Two SVG masks, each containing a rectangle and a circle, selectively control which parts of the horizontal and vertical lines remain visible, creating the central circular effect against a dark background.

AAleOG

75% match

Loading thumbnail…

Untitled

This visualization creates a circular aperture effect on a full-screen grid of horizontal and vertical black bars. Using D3 selections and data joins, the code generates 30 horizontal and 80 vertical rectangular strips, then applies two SVG masks with white and black circles at the center to selectively reveal or hide intersections. The result resembles a moiré pattern or camera viewfinder, where overlapping bars form a circular optical illusion against the white background. The implementation uses D3’s `select`, `data`, and `enter` APIs along with SVG mask elements to achieve the layered visual effect.

Ssubratanp

75% match

Loading thumbnail…

d3d3d3 2

Two layered grids of thin rectangles sweep across the full screen, one horizontal and one vertical, creating a moiré-like interference pattern. Each grid is partially hidden by an SVG mask that reveals the shape of a large symbol—a star from the d3 symbol set—at the center. The code builds the visualization with D3 selections, joining data arrays to create 100 rects per grid, and defines reusable mask-rendering functions via `svg.call`. Rendering uses SVG elements within a React framework, with masks composed of a full-screen rect and a symbol path.

GGusnaRWX

74% match

Loading thumbnail…

d3

A grid of alternating horizontal and vertical SVG rectangles is masked to reveal a circular window at the center of the viewport. The example demonstrates how to construct and apply multiple SVG masks using D3’s selection and data-join methods, specifically `selectAll` with `range` and `join('rect')`. Two masks (`circle-mask` and `circle-mask-2`) use black-and-white rectangles and circles to control visibility of the 50 strips in each direction.

Sserebryanaya.n@gmail.com

74% match