full symbol D3 Sol Le Witt Vertical

100%

full symbol D3 Sol Le Witt Vertical

✓ Published0🌍 Public

Last edited May 4, 2024

Created on Apr 28, 2024

This example generates a Sol LeWitt-inspired grid of vertical and horizontal stripes, with each stripe masked by an abstract symbol. Two separate groups of `<rect>` elements are drawn across the full width and height, and each group is assigned a different SVG mask. The masks are created using D3’s `symbol` and `symbols` APIs to render shapes like circles and crosses, with one mask inverted to produce contrasting cutout effects. The visualization relies on D3 selections and data joins to render the grid dynamically at full viewport size.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Full Sol LeWitt D3

This example creates a grid of horizontal and vertical stripes whose visibility is selectively revealed through two SVG masks, positioned over symbol-shaped cutouts. The mask pattern is generated using D3’s `range` and `symbol` APIs, alternating between normal and inverted masks to produce a complementary crossover effect. The visualization renders entirely with SVG, using dynamic `mask` URLs applied to each rectangle. The code leverages D3 v7 selections, joins, and the `symbol` generator to construct geometric shapes across the full viewport.

JJamie

92% match

Loading thumbnail…

Sol LeWitt-d3-shape

This example generates an abstract grid of horizontal and vertical stripes that are selectively masked by two inverted symbol shapes, using D3 v6. It renders SVG rectangles across the full viewport, with 100 horizontal bars and 100 vertical bars, each assigned a mask. The `d3.mask` API combines a white or black background rect with a large `d3.symbol` path (symbols[4], a cross) translated to the center. Two masks, one inverted, create a dynamic interplay between the geometric grid and the central symbol.

Bbillzhou2005

90% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example shows a large grid of horizontal and vertical stripes that appears to be interwoven, with geometric symbols such as circles, diamonds, and triangles emerging from the pattern. It generates 100 striped bands in each direction and uses two SVG masks to selectively hide portions of the grid, creating the illusion of layered shapes. Built with D3 v7 and React, the code uses `select`, `range`, `symbols`, and `symbol` to draw the mask paths, with `renderMask` applying the inverted fill logic. The rendering approach is purely SVG-based, sized to the full browser window.

Ccharlieronchetti@gmail.com

90% match

Loading thumbnail…

Sol Lewwit D3 symbol

This example generates a full-screen SVG pattern inspired by Sol LeWitt, using two sets of parallel stripes—horizontal and vertical—that intersect to create a grid. A mask with a circular symbol cuts a ring shape through the pattern, while a second, inverted mask reveals a contrasting ring effect. Built with React and D3.js, the code uses `d3.select`, `d3.range`, and `d3.symbol` to construct the marks and masks, with dimensions tied to `window.innerWidth` and `window.innerHeight`. The rendering relies entirely on SVG elements and attributes.

PPeiyang Li

89% match

Loading thumbnail…

Full Sol LeWitt with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3 and SVG. It builds a grid by rendering horizontal and vertical rectangles, each filtered through a mask that reveals alternating symbol shapes. The code uses `d3.select`, `range`, `symbols`, and `symbol` to draw the mask patterns, with `join` for data-driven elements and `mask` attributes for clipping. The visualization fills the entire browser window, with parameters like `n = 100` controlling the grid density and symbol spacing.

Ddalia.miliauskaite@me.com

89% match

Loading thumbnail…

Full Sol LeWitt Reproduction D3

This example reproduces a Sol LeWitt wall drawing using D3 to render a dense grid of horizontal and vertical stripes as SVG rectangles. Two SVG masks, each containing a large circular symbol from `d3.symbol`, cut the stripes to create a bold interlocking pattern across the full browser window. The code relies on D3 selections, `range` for generating stripe positions, and the `symbol` API, with the visualization sized to the viewport dimensions.

Ttverdone

89% match

Loading thumbnail…

full Sol LeWitt-d3

This example displays a full-screen grid of horizontal and vertical stripes within two circular masks, creating an overlapping pattern of lines at the center of the viewport. The visualization generates 100 rectangles for each orientation using `d3.range`, appending them to SVG groups via `d3.select` and the `join` operation. Two SVG masks, one with a black background and white circle and the other inverted, control visibility of the stripes, producing a dynamic interplay of crisp bands within the circular boundaries. The rendering is built with React, uses the d3 library version 6.6.1, and outputs to SVG.

Bbillzhou2005

88% match

Loading thumbnail…

D3 Sol Le Witt Vertical

This example generates a grid of horizontal and vertical rectangles that form a striped pattern. Two circular masks reveal the grid only within their boundaries, creating a bold, minimalist composition reminiscent of Sol LeWitt's wall drawings. The code uses D3's `select` and `range` APIs to generate 100 rectangles in each direction, with SVG `mask` elements controlling visibility. Each stripe is a distinct SVG `rect` element, and the masks are composed of black and white rects and circles.

SShannon Teoh

88% match