Epis 4

100%

✓ Published1🌍 Public

Last edited Sep 25, 2022

Created on Sep 25, 2022

This example creates a full-screen SVG pattern of 100 alternating horizontal and vertical stripes, with both sets masked to reveal a circular focal point in the center. Using D3’s `select` and `range` utilities, it generates rectangles that are constrained by two custom masks—one that hides everything outside the circle and another that hides the circle itself—producing a grid-like intersection effect. The rendered output is purely geometric, relying on SVG masks rather than data.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Epis 4

This example creates a full-screen interactive grid of horizontal and vertical bars overlaid with circular masks. The visualization uses D3’s `select` and `range` to generate 100 thin rectangles along each axis, producing a crosshatch pattern. Two SVG masks hide all but a central circular area, revealing the intersecting lines within the circle against a blank background. The code relies on D3’s data join (`join('rect')`) to bind array values to SVG elements, demonstrating a declarative approach to building static geometric compositions.

SSGPPellow

86% match

Loading thumbnail…

Starting with D3

This example creates a full-screen SVG pattern of horizontal and vertical stripes using D3’s `select`, `range`, and `join` methods. Two sets of 100 rectangles are generated, each masked to reveal or hide a circular region at the center. The code uses SVG `mask` elements with black-and-white circles to produce a cross-shaped visual intersection. The data is synthetic, generated via `range(n)`, and rendered entirely with D3 v6 and SVG attributes.

Pphilmae

86% match

Loading thumbnail…

Episode 4

Two sets of 100 thin rectangles form horizontal and vertical stripes across the full screen, intersecting to create a dense grid. Two SVG masks cut the pattern into distinct shapes: a large centered diamond symbol and a circular window. Built with React and D3 v6, the code uses `range`, `select`, `append`, and `join` to bind data and generate SVG elements dynamically.

Aaschue

85% match

Loading thumbnail…

Fork of Epis 4 sol lewitt

This example generates a grid of horizontal and vertical striped rectangles overlaid with two complex masks, creating an interplay of geometric forms inspired by Sol LeWitt. The SVG is rendered using D3’s `select`, `range`, and `join` to place the stripes, while custom mask paths are built with D3’s `symbol` and `symbols` API, drawing five distinct shapes at intervals. The first mask uses an inverted fill, the second a non-inverted fill, producing contrasting cutout effects across the composition. The visualization is fully responsive, sizing to the window dimensions.

SSGPPellow

84% match

Loading thumbnail…

Fork of d3-get-it-right-04

This example creates a hundred horizontal and vertical striped rectangles overlaid to form a grid, with a symbol-shaped hole cut through the pattern. The code uses d3.select, d3.range, and d3.join to bind data to SVG rect elements. Two SVG masks, one inverted and one normal, are built with d3.symbol and a d3.symbols[0] path (a circle) to punch a central circular reveal. The result shows layered d3.mask and d3.symbol APIs combined on a full-window SVG canvas.

Tthymdi

84% match

Loading thumbnail…

d3

This example demonstrates masked striped patterns overlaid on top of each other. It creates 100 horizontal rectangles and 100 vertical rectangles, each with a height or width of 10 pixels, spaced 20 pixels apart. The rectangles are masked using SVG masks with circular cutouts, creating a crosshatch effect with a circular reveal. The visualization uses D3 v6 with `select`, `selectAll`, and `data` joins to bind the mark arrays to the SVG elements, rendering the output as SVG in a React-styled HTML page.

Eelgato_1994

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

83% match

Loading thumbnail…

Epsoide 3

A full-screen D3 art piece displays two sets of randomly colored horizontal and vertical bars. A circular mask reveals the horizontal stripes in the center, while an inverted mask applies the vertical stripes to the surrounding area, creating an intersecting grid pattern. The code uses `d3.select` and `d3.range` to generate rectangle data, then applies SVG `<mask>` elements with circles to achieve the effect.

Tthenlpstudent

83% match