Skip to main content
SimilarExport ZIP
100%

test

✓ Published0🌍 Public
Mmartincbhak@gmail.com
Last edited Jan 26, 2024
Created on Jan 26, 2024

A grid of thin horizontal and vertical bars covers the full screen, creating intersecting lines that are visible only through a central circular mask, leaving the corners dark. The bars are drawn as SVG rectangles using D3’s `selectAll().join()` pattern with `range()`-generated data. Two masks define the view: one white circle reveals the inner bars, while a second mask with an inverted circle hides the outer bars’ center. The example uses D3 v7 and SVG rendering with no external data source.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Implementation

This example shows a grid of horizontal and vertical bars covering the full screen, with two circular masks revealing the intersection of the bars. Each bar is a separate SVG `<rect>` element, generated using `d3.range` and `selectAll().join()`. The first mask uses a black background with a white circle to show the horizontal bars, while the second inverts the colors to show the vertical bars. The code relies on D3 v7’s `select` and `range` functions to construct the elements and masks dynamically.

VVikil Lakkavatri
85% match
Loading thumbnail…

d3d3d3

This example shows a full-screen pattern of intersecting horizontal and vertical bars, each rendered as a set of thin SVG rectangles. The bars are generated using `d3.range` and joined to `rect` elements, but only the central circular area is visible due to two SVG masks. The first mask reveals the horizontal bars through a white circle on a black background, while the second mask hides the vertical bars in the same region using a black circle on white. The result is a cross-hatched grid with a circular cutout, built with React and D3 v7.

GGusnaRWX
84% match
Loading thumbnail…

MaskTest

This example demonstrates how SVG masks can create intersecting geometric patterns. Two sets of thin, full-length rectangles—horizontal and vertical—are drawn across the entire viewport using d3.range and d3.selectAll. Each set applies a different circular mask: one reveals a white circle against a black background, while the other inverts the mask, hiding the circle. The result is a crosshatched grid with a central circular region where the two masked layers visibly interact. The code uses D3 v6 selections and the SVG `<mask>` element.

Zzhansihua
83% match
Loading thumbnail…

D3Trial full

This example renders a full-screen SVG grid of 100 horizontal and 100 vertical bars, each drawn as a thin rectangle. The bars are layered and clipped by two SVG masks. One mask inverts its fill to hide the horizontal bars over a central region, while the other mask similarly hides the vertical bars in a complementary area, creating a cross-hatched visual effect. The code uses D3 v6 selections with `.join()`, `d3.range`, and `d3.symbol` (commented out), with masks constructed via `svg.append('mask')` and filled rectangles. The dimensions are set to `window.innerWidth` and `window.innerHeight`.

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

Fork of Fork of Fork of SVG Fundamentals - D3

This example demonstrates a full-screen grid of horizontal and vertical bars revealed through two circular masks. The visualization uses D3’s `select`, `range`, and data joins to generate 100 rectangles in each orientation, with CSS masks defining a central circular viewport. Two SVG masks—one with a black background and white circle, another inverted—control which bar segments remain visible, creating a crosshatch pattern that fades at the edges. The rendering relies on the SVG `<mask>` element and D3’s `join` API.

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

D3 first steps

This example generates a full-screen grid of 100 vertical and horizontal bars using D3 selections and joins, then applies two circular SVG masks to create a striking cross-hatch pattern. Built with a React-wrapped D3 v6 setup, the code uses `select`, `range`, and `join` to bind data to rectangles, while the masks—one with a white circle on black, the other inverted—reveal and hide intersecting lines around a central focal point.

Ccyriltoneatto965
82% match