Skip to main content
SimilarExport ZIP
100%

Fork of Fork of test lewitt d3

✓ Published0🌍 Public
Kkhalil-ryu
Last edited Nov 24, 2022
Created on Oct 31, 2022

This example creates a grid-based generative artwork using D3.js version 7 and Anime.js. It draws 100 horizontal and 100 vertical rectangular strips across the full viewport, with each strip assigned an SVG mask. Two distinct masks are applied using D3's `symbol` and `symbols` functions to generate complex path patterns, with the first mask using a black fill on white and the second using the inverse. The SVG output is rendered directly to the browser window, filling the entire screen with no margins.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction Final with D3

This example draws a generative grid inspired by Sol LeWitt using SVG and D3. It fills the viewport with 100 horizontal and 100 vertical stripes, each masked so that only parts of the grid remain visible. Two separate masks, created with d3.mask, contain large D3 symbols (from d3.symbol) that act as cutouts or reveals, inverting their effect between the axes. The code uses d3.select, d3.range, and d3.symbol to build the composition programmatically, producing a layered geometric pattern that plays with visibility and form.

Kkwambokar
86% match
Loading thumbnail…

Fork of test lewitt vertical

This visualization uses D3 v7 and Anime.js to generate an abstract, grid-based composition of colored vertical and horizontal bars. It shows a pattern of alternating purple and green vertical rectangles layered over black horizontal lines, with two circular SVG masks creating distinct circular cutout regions that reveal the different bar orientations. The code constructs elements via D3 selections and raw SVG DOM manipulation, applying masks to selectively show portions of the two bar layers.

Kkhalil-ryu
86% match
Loading thumbnail…

Fork of Fork of Sol LeWitt-d3-3

This example generates a grid-based abstract pattern using D3.js version 6, rendering SVG rectangles in horizontal and vertical orientations. The visualization uses the d3.select and d3.range functions to create 100 stripes of each direction, layered with SVG mask elements to create two circular cutout effects at the center of the viewport. The first mask uses a white circle on black, while the second uses a black circle on white, producing contrasting visibility through the overlapping stripes. The visualization fills the entire browser window dynamically by setting the width and height to the inner dimensions of the viewport.

Bbillzhou2005
84% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt–style grid of horizontal and vertical lines, overlaid with two masks that reveal symbolic shapes in contrasting areas. The example uses D3 v6 to generate 100 rectangular strips in each direction, then applies SVG masks via `d3.select` and `append('mask')`. Each mask uses D3 symbol generators (`d3.symbol` and `d3.symbols`) to draw numbered geometric icons—circles, crosses, diamonds, and squares—in black or white, creating a layered optical effect. The code directly manipulates SVG elements and relies on the `range`, `join`, and `attr` APIs to build the repeating structure.

AAlpineStranger
84% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3_test

This example reproduces a Sol LeWitt-inspired geometric artwork using D3.js. It renders a grid of thin, alternating horizontal and vertical lines by combining SVG `rect` elements with two custom masks, creating an intersecting pattern that visually shifts between the two orientations. The JavaScript code uses D3 APIs such as `select`, `range`, `symbol`, `scaleBand`, and the `join` method to generate the 120-line structure. Each mask cycles through symbols from D3’s symbol set to alternate black and white fill, producing the final composed effect. The SVG output is sized to the full browser window.

Ppawelsapiecha
83% match
Loading thumbnail…

Fork of Sol Lewitt Reproduction with D3

This example generates an abstract grid pattern using Sol Lewitt-inspired geometry. It draws horizontal and vertical strips of rectangles, then applies two distinct masks with D3’s `symbol` shapes (including circles, crosses, and diamonds) to selectively reveal or hide portions of the grid. The masks are created with `d3.mask`, one inverted against the other, producing a layered interplay between the symbol silhouettes and the underlying striped composition. The visualization uses D3 v7 selections, `range`, and `join` to construct the SVG elements within a full-window viewport.

Aaidarshafeev1@gmail.com
83% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering a grid of horizontal and vertical rectangles that intersect through SVG masks. The code creates 100 evenly spaced lines in each direction, then applies two complementary masks—one normal and one inverted—to reveal or hide the grid patterns. Using D3 selections, `range`, and symbol generators, the masks incorporate circular, triangular, and other symbolic shapes. The artwork is dynamically sized to the viewport and rendered as an SVG, demonstrating how D3’s data-join and mask primitives can build layered generative art.

XXuân Vinh
83% match
Loading thumbnail…

Fork of Fork of Sol LeWitt with d3

This example generates a grid of thin horizontal and vertical lines using D3’s `select`, `range`, and `join` methods, rendered as SVG rectangles across the full browser viewport. Two circular masks invert the visibility of each set of lines: the first hides everything outside a 200-pixel circle centered on the screen, while the second hides everything inside its circle. The result juxtaposes a solid disk of vertical strips against an outer field of horizontal strips, creating a Sol LeWitt-inspired geometric pattern. The code runs in React and relies on D3 v7 for data binding and SVG manipulation.

Mmax-31
83% match