SolLeWit using D3 without Notes

100%

SolLeWit using D3 without Notes

✓ Published0🌍 Public

Last edited Aug 17, 2022

Created on Aug 17, 2022

Forked from Fork of SolLeWitt - convert from VanillaJS to D3

This visualization creates a geometric interplay of horizontal and vertical bars that reveal a diamond-shaped symbol through the use of SVG masks. The code uses D3 v7 to generate bar rectangles across the full screen, then applies two complementary masks—one black background with a white symbol and one inverted—to selectively show or hide different bar segments. The masks are defined using D3’s `symbol` generator with the `symbols[1]` diamond shape, rendering the final pattern without explicit notes or annotations.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

The visualization reproduces a Sol LeWitt art piece by layering horizontal and vertical bar patterns over two sets of symbol-shaped masks. It uses D3 v7 to create an SVG canvas sized to the browser window, with `d3.range` generating 100 bars in each direction, offset by 20-pixel intervals. Two masks, built with `d3.symbol` and SVG `mask` elements, alternate black-and-white fills to reveal the bar intersections, producing a geometric interplay of shapes and lines across the full viewport.

Xxinyuwangxyw

86% match

Loading thumbnail…

Sol LeWitt with D3

This example generates a grid of 100 horizontal and vertical bars in SVG using D3’s `select`, `range`, and `join` methods. Two circular masks reveal overlapping patterns: the first shows horizontal bars inside a white circle, while the second inverts the effect for vertical bars. The rendering uses D3 selections to append rectangles and mask elements to the page, creating a Sol LeWitt-inspired geometric composition.

JJetlinZ

85% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 - Shapes

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js version 7, rendered as SVG in a React-free HTML page. It displays 100 horizontal and vertical barcode-like stripes that intersect with a row of alternating filled and unfilled symbol shapes (circles, crosses, diamonds, and others) generated via `d3.symbol` and `d3.symbols`. Two SVG masks (`mask-1` and `mask-2`) use inverted fill colors to selectively reveal or hide the stripes, creating a dynamic interlocking pattern across the full viewport width and height.

Aa0x0

85% match

Loading thumbnail…

Full Sol LeWitt with D3

This example renders two interlocking sets of green bars—horizontal and vertical—on a full-window SVG canvas. The bars are masked by two overlapping circular shapes created with D3’s `symbol` API, which generates geometric star-like paths. Using D3’s `select`, `range`, and `join` methods, it draws 50 bars in each direction, with the second mask inverted so that only the region outside its circle reveals the vertical bars. The visualization demonstrates how SVG masks and D3’s declarative data joins can combine to produce layered, patterned compositions.

EEd Smale

84% match

Loading thumbnail…

Sol LeWitt reproduction with d3 (symbols)

This example recreates a Sol LeWitt-inspired drawing using D3.js by layering two perpendicular sets of striped rectangles. Horizontal bars appear only within a circular region defined by an SVG mask, while vertical bars are masked to the inverse shape, creating a clean intersection of stripes inside the circle. The code uses `d3.range`, `d3.select`, SVG `rect` elements, and `symbol` with `symbols[2]` to generate the circle mask paths. The visualization is rendered entirely in the browser with D3 v7, filling the viewport dynamically.

FFrancisco Ibelles

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

84% match

Loading thumbnail…

Fork of SolLeWitt - convert from VanillaJS to D3

This visualization generates a geometric pattern using Sol LeWitt-inspired horizontal and vertical bars. It uses `d3.select` and `d3.range` to create rectangles, with SVG masks (`mask_bottom` and `mask_top`) that reveal or hide parts of the bars based on circular fill regions. The code computes bar positions based on window dimensions and uses the D3 `join` API to efficiently append and style `<rect>` elements. The final composition displays a grid of bars with a circular cutout effect in the center.

JJun Alvarado

84% match

Loading thumbnail…

SolLeWitt D3 - Single Image to Multiple Images

This example renders two alternating grids of horizontal and vertical bars, each masked by different geometric symbols to create a layered composition. Using React with D3 v7, it generates SVG rectangles based on window dimensions and applies SVG masks containing D3’s built-in symbol shapes. The code defines a `renderMask` function that creates white or black mask backgrounds with inverted symbol fills, then applies these masks to the bar groups. The visualization demonstrates how D3 selections, data joins, and mask operations combine multiple images into a single viewport.

JJun Alvarado

84% match