JavaScript arrays

100%

JavaScript arrays

✓ Published0🌍 Public

Last edited Oct 18, 2023

Created on Apr 17, 2023

A grid of thin horizontal and vertical stripes is overlaid with a mask containing five distinct geometric symbols—such as circles and crosses—rendered using D3’s `symbol` generator. The masks, created with `d3.select` and `append`, alternate between inverting the stripes’ visibility, revealing the symbol shapes as cutouts. Horizontal stripes use one mask, vertical stripes another, producing intersecting patterns across the full window. The example uses D3 v6.6.1, SVG rendering, and 100 iterations each of `range(n)` to generate the stripe data.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 all symbols

This example displays a grid of horizontal and vertical stripes overlaid with all D3 symbols. The code generates two sets of 100 rectangles each, using D3’s `range` and `selectAll` with `join` to create the stripes, and applies two SVG masks to reveal the symbols through the grid. Each mask is built by iterating over D3’s `symbols` array and rendering each symbol using the `symbol()` API, with the second mask inverted to create a contrasting overlay effect.

Jjony6290

85% match

Loading thumbnail…

d3 simbols

A grid of horizontal and vertical stripes alternates through two SVG masks to reveal a large star-shaped symbol at the center. The example demonstrates D3’s `symbol` and `symbols` API to generate the star path, combined with `mask` elements to create intersecting stripe patterns. Fifty rectangles are drawn in each direction using `d3.range` and `join`, with the horizontal set masked by an inverted white-on-black layer and the vertical set by its opposite. The result shows how layered masks can produce dynamic visual interferences.

Sserebryanaya.n@gmail.com

84% match

Loading thumbnail…

episode 5 js arrays

This example creates a grid-based generative drawing by rendering 100 horizontal and vertical black stripes overlaid with two SVG masks. The masks use large symbols from D3’s `symbols` API to carve circular and other geometric patterns into the stripes, producing a Sol Lewitt–inspired composition. The code uses `d3.select`, `range`, and the `.join` method to build the stripes, while the `renderMask` function dynamically appends `mask` elements and paths. The result is a layered, monochrome visual that combines repetitive linework with symbolic cutouts.

Ppoppy

84% match

Loading thumbnail…

d3d3d3 3

This example generates a grid of 100 horizontal and vertical stripes, each using a mask to reveal differently-shaped symbol outlines at the center of the screen. The horizontal bars are masked by shapes like circles and crosses, while the vertical bars are masked by their inverses, creating a striking geometric interplay between foreground and background. Built with React and D3, the code uses `d3.range`, `d3.symbol`, and `d3.symbols` to construct paths, with masks defined via SVG and applied using the `mask` attribute. The visualization renders entirely through SVG, with a flickering effect caused by the contrasting masked regions.

GGusnaRWX

83% match

Loading thumbnail…

D3 JS SHAPES

This example displays an interactive grid of horizontal and vertical stripes that intersect to create a dynamic pattern. The visualization uses D3.js to generate 100 rectangles along both the x and y axes on an SVG canvas, with each line masked by custom patterns containing all D3 symbols. Two masks are created—one inverted and one not—to alternate which lines remain visible as the symbols overlap. The code leverages `d3.range`, `d3.symbols`, and `d3.symbol` to populate the mask shapes, with each symbol scaled to 8000 units for visibility. The result is a geometric composition where the stripe intersections reveal distinct symbol shapes across the full viewport.

TTehran Mammadov

83% match

Loading thumbnail…

D3_Sol

This example overlays two sets of alternating horizontal and vertical stripes, each masked by a pattern of D3 symbols (such as circles, crosses, and diamonds) centered on the canvas. The first mask uses solid shapes on a white background, while the second inverts the fill, creating a contrasting lattice. Built with React and D3 v7, it uses `select`, `range`, `symbols`, and `symbol` to generate SVG elements, with `mask` applied to each stripe group to reveal the symbol shapes through the grid.

PPolydexter

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

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

81% match