100%

episode 5 js arrays

✓ Published0🌍 Public

Last edited May 18, 2023

Created on May 18, 2023

Forked from Fork of epi 4 full sol_lewit_repro with D3

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.

AI-generated description

sol lewitt

link to sol lewitt

this uses d3 and is forked from the soll lewit repro

MIT Licensed

Similar vizzes

Loading thumbnail…

JavaScript arrays

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.

AAlp

84% match

Loading thumbnail…

Episode 4 _ 2 - no duplicated logic

A grid of ninety-nine thin horizontal and vertical rectangles, clipped by two mask shapes, creates an overlapping lattice pattern. The visualization uses D3 v6 selections and data joins to append SVG rectangles and paths. A reusable `renderMask` function builds two masks, each containing a centered symbol from `d3.symbol` and `d3.range`. One mask inverts its fill to reveal the vertical bars, while the other hides them, producing alternating visible segments across the full browser viewport. The SVG renders at high resolution with rectangle thickness and spacing determined by array indices.

Aaschue

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

79% match

Loading thumbnail…

Sol Lewitt Reproduction with D3 multiple symbols

This example reproduces a Sol LeWitt-style drawing using D3’s `symbol` and `symbols` API to generate five geometric shapes (circle, cross, diamond, square, and star) that act as masks. Two sets of horizontal and vertical striped rectangles are drawn, each masked by a different pattern of symbols; the first mask uses black-filled symbols on white, the second inverts this. The `renderMask` function appends SVG `mask` elements, mapping each symbol to a `path` via `symbol(d, 8000)()` at evenly spaced translations. The code relies on `select`, `range`, and `join` for data-driven rendering.

GGullyPlook

78% match

Loading thumbnail…

Epis 4

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.

SSGPPellow

78% match

Loading thumbnail…

SVG fundementals

This example demonstrates two sets of overlapping horizontal and vertical stripes, each masked by a set of symbols. It uses D3.js version 6.6.1 with the `select`, `range`, `symbols`, and `symbol` APIs to construct SVG masks. The horizontal stripes use the first mask, while the vertical stripes use an inverted second mask, revealing the symbols where the stripes intersect. The rendering is entirely SVG-based, with the code appending mask elements and rectangles to the SVG canvas.

JJuraj Čižić

78% match

Loading thumbnail…

multi masks

This example creates an abstract pattern of 100 horizontal and 100 vertical stripes overlaid on an SVG canvas, with each stripe masked by one of two complementary masks. The masks are defined using D3’s `mask` element, where black and white rectangles and symbol shapes (from `d3.symbol`) determine visibility. The code uses D3 selections and `join` to bind data from `d3.range`, and applies masks via `attr('mask', 'url(#mask-1)')`. The result is a woven, crosshatched visual effect generated entirely in the browser.

JJetlinZ

77% match

Loading thumbnail…

Fork of SVG Fundamentals

Horizontal and vertical stripes cross an SVG canvas to form a grid, while two mask layers reveal or hide rows and columns based on overlapping d3 symbols. The code uses d3.select, range, join, and symbol to generate 100 rectangles in each direction, with masks built via d3.mask and inverted fills. Both masks position five symbol paths (from d3.symbols) across the center, controlling visibility of the striped pattern. The rendering relies entirely on SVG elements and D3’s data-join to create the layered visual effect.

GGeorgi Dimitrov

77% match