100%

Myfirstviz

✓ Published2🌍 Public

Last edited Dec 27, 2023

Created on Dec 27, 2023

This generative visualization fills the browser window with a grid of horizontal and vertical colored bars. The piece uses masked rectangles to create a circular lens effect: horizontal bars are visible only through a central circular mask, while vertical bars appear through an inverted mask, producing a dynamic crosshatch pattern that reveals the interplay of overlapping lines. Built with the raw SVG API in JavaScript, the code programmatically creates 100 horizontal and 100 vertical rectangle elements, each masked by a separate circular region defined via SVG `<mask>` elements.

AI-generated description

My fisrt viz with javascript

MIT Licensed

Similar vizzes

Loading thumbnail…

my first d3

This example generates a full-screen SVG composition of 100 horizontal and 100 vertical rectangles, each 10 pixels thick and spaced 20 pixels apart. Two SVG masks with 200-pixel-radius circles in the center determine visibility: the first mask (white circle on black) reveals horizontal strips, while the second (black circle on white) hides vertical strips. Using d3.select, d3.range, and the .join() pattern, the rectangles are created and styled, with the masks applied via the url(#…) attribute. The result is a striped grid where horizontal and vertical bars cross, creating a contrasting pattern inside and outside the circular regions. Data is procedurally generated from the range of 100.

NNeeraj Kumar

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

73% match

Loading thumbnail…

JS Example

A JavaScript-generated SVG visualization displays a series of vertical blue rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full window height. A circular mask, centered on the screen with a radius of 200 pixels, reveals only the bars within its boundary, creating a striking circular cutout effect against the otherwise full-height stripes. The code builds the SVG dynamically using the DOM API, creating elements via `createElementNS` and appending them to the body with attributes set programmatically.

Nnubhatia

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

72% match

Loading thumbnail…

jmbv Fork of Hello VizHub

This example demonstrates D3.js SVG masking by drawing two sets of overlapping horizontal and vertical rectangles, each clipped by circular masks to reveal a central circular window. The code uses `d3.select` and `d3.range` to generate 100 rectangles per axis, with one mask using a black background and white circle, the other inverted. The visualization fills the browser viewport using `window.innerWidth` and `window.innerHeight`, producing a dynamic grid-like pattern visible only within the overlapping masked region.

JJuanmaBV

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

70% match

Loading thumbnail…

SVG-Quyt

This example generates a geometric composition of 100 horizontal and 100 vertical bars that form a grid. It uses two circular SVG masks to create a lens effect: the horizontal bars appear only inside a central white circle, while the vertical bars are visible everywhere except that same circle, leaving a circular cutout. The piece is rendered entirely with SVG elements, built using D3’s `select`, `range`, and `join` methods to populate the rectangles.

Ttrongan765@gmail.com

70% match

Loading thumbnail…

Sole le witt variant full

This example generates two sets of horizontal and vertical bars that overlap to form a grid-like pattern, with a circular mask revealing the intersection of the layers. Horizontal bars are shown only inside the circle, while vertical bars appear only outside it, creating a contrast between the two regions. The visualization is rendered in SVG using D3 v6, with `range`, `select`, and `append` to construct the bars and masks, and relies on D3’s `mask` elements to define the visible areas. No external data is used; the composition is purely procedural.

Ccaitlin-woods

70% match