test lewitt

100%

✓ Published2🌍 Public

Last edited Oct 21, 2022

Created on Oct 17, 2022

A full-screen SVG rendering creates a circular viewport into a dense field of 100 vertical black stripes, each 10 pixels wide and spaced 20 pixels apart. A mask with a white circle on a black background reveals the stripes only within that circle, while the rest of the canvas remains hidden. The code builds the SVG and mask elements using the raw DOM API, and it relies on D3 v7 only for the script import, with no D3-specific functions invoked.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

LeWitt Recreation w/ D3

This example recreates a Sol LeWitt-style geometric drawing using D3.js v7 and SVG rendering. It displays a grid of horizontal and vertical black bars overlaid on a full-window canvas, with a circular mask creating a central void. The code uses D3's `select`, `range`, and `join` to generate 100 rect elements in each orientation, while SVG `mask` elements with white and black shapes define the visible regions. The result is a minimalist pattern that demonstrates simple masking and data-driven shape generation.

MMarvin Frede

82% match

Loading thumbnail…

so lewit reproduction D3.js fundamental

This example reproduces a Sol LeWitt–style drawing using D3.js. It generates a grid of horizontal and vertical rectangles, each masked to reveal a circular cutout at the center of the screen. The visualization uses D3’s `select`, `range`, and data joins to create 100 rects in each direction, with SVG masks (`url(#circle-mask)`) alternating black and white fills to control visibility. The code relies on D3 v7 and renders entirely as SVG, filling the full browser viewport with no external data.

Ddeebanks77

82% match

Loading thumbnail…

SOL Lewitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.8.5, generating horizontal and vertical striped rectangles that form a grid pattern. A circular mask, created with SVG `mask` elements and inverted using a second mask, crops the intersecting lines to create a distinctive circular window in the center of the canvas. The code constructs the SVG and masks programmatically via the DOM API, appending 100 alternating horizontal and vertical rects. The visualization fills the entire browser viewport, using `window.innerWidth` and `window.innerHeight` to set the canvas dimensions.

DDonald Bagwell

81% match

Loading thumbnail…

sol_lewitt_test_with_D3

This example renders a generative geometric composition inspired by Sol LeWitt, using D3.js to create intersecting grids of thin horizontal and vertical rectangles. A circular mask, defined with SVG `mask` elements and `circle` shapes, reveals the grid pattern in the center while hiding it elsewhere. The code uses `select`, `range`, and `join` from D3 to efficiently generate and bind data to SVG `rect` elements, with the second mask inverting the visibility to produce a layered effect. The visualization fills the browser window and updates with the viewport size.

Ggaudi84

81% match

Loading thumbnail…

full_sol_lewitt_test_with_D3

This example generates an abstract geometric composition inspired by Sol LeWitt using D3.js, rendering horizontally and vertically striped rectangles across the full browser window. It employs SVG masks with `d3.symbol` and `d3.range` to create two distinct mask patterns—one containing the seven symbol types and another with a duplicated symbol—which selectively reveal the layered line grids. The `select`, `append`, and `join` APIs structure the SVG elements, while the `call` method applies the mask-rendering functions. The code uses D3 version 6.6.1 and dynamically sizes the output to the viewport.

Ggaudi84

81% match

Loading thumbnail…

SOL Lewitt with D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js version 7.8.5. It displays a grid of horizontal and vertical striped rectangles that form a circular mask pattern at the center of the screen, rendered as SVG. The code builds the visualization with `select`, `range`, and `.join('rect')`, layering two sets of rectangles and applying SVG `<mask>` elements to create the intersecting shapes.

DDonald Bagwell

81% match

Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape 2

This example reproduces a Sol LeWitt-inspired drawing using D3.js v7, rendered as SVG. It displays two perpendicular sets of thin horizontal and vertical rectangles that form a dense grid over the full viewport. Two circular masks—created with `svg.append("mask")`, `symbol(symbolCircle)`, and inverted black-and-white fills—cut overlapping circular holes in the grid, revealing the background. The code uses `select`, `range`, `join`, and `attr` to generate 100 rectangles per axis, with the `symbolCircle` path defining the mask shapes.

Ddeebanks77

81% match

Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape

This visualization reproduces a Sol LeWitt-style drawing using D3.js v7. It renders horizontal and vertical striped rectangles that are masked to reveal a circle in the center, creating a clean geometric interplay between lines and a circular void. The SVG output uses two separate masked groups: the first applies a white mask with a black circle to horizontal bars, while the second uses an inverted mask for vertical bars. The code leverages D3’s `range`, `symbol`, and `symbolCircle` APIs to generate the shapes and masks programmatically.

Ddeebanks77

81% match