Fork of so lewit reproduction D3.js fundamental

100%

Fork of so lewit reproduction D3.js fundamental

✓ Published0🌍 Public

Last edited Oct 7, 2023

Created on Oct 7, 2023

Forked from so lewit reproduction D3.js fundamental

This example manipulates SVG masks to create a dynamic visual composition of overlapping horizontal and vertical stripes. The main view is a grid of 100 rectangles that cycle through a circular mask, revealing a sunburst-like pattern from the center. A second set of rectangles uses an inverted mask to create a contrasting cross-hatch effect. The code uses the D3.js library (v7) to construct the SVG elements and apply the masking logic via the `append` and `attr` methods.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of sol lewit reproduction assignment

This example reproduces a Sol LeWitt-inspired drawing using D3 v7 selections and SVG masks. Three alternating vertical and horizontal stripe patterns are overlaid on the page, each masked by a large circle that reveals or hides the lines through contrasting black and white mask fills. The code builds the SVG structure with `d3.select`, generates stripe counts via `d3.range`, and applies masks through D3’s `attr` method, rendering the final output as SVG.

KKerim

87% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a grid of overlapping horizontal and vertical rectangles as SVG elements. The piece shows alternating stripes of black and white that intersect within two circular masks, creating a layered, op-art effect across the full browser viewport. The code uses d3.select, d3.range, and selection.join to generate 100 rectangles along each axis, with svg.append('mask') defining two circular regions that invert the fill colors. The rectangles are masked so that one circle reveals white-on-black stripes while the other shows black-on-white, producing a dynamic visual contrast.

FFerasMorsi

86% match

Loading thumbnail…

Fork of d3 sol lewit

This visualization generates a grid of horizontal and vertical rectangles on an SVG canvas, with two masks that reveal or hide different symbol shapes across the grid. The project uses D3 v6 APIs including `select`, `range`, `symbols`, and `symbol` to render the masked patterns. The two masks, created via `renderMask`, alternate between white and black backgrounds with the opposite fill for the symbols, producing a moiré-like interplay between the line grid and the overlaid symbol clusters. The code runs on a React framework and uses raw SVG rendering with dynamic window dimensions.

HHéloïse Feldmann

86% match

Loading thumbnail…

Fork of Fork of Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7, rendering two sets of overlapping horizontal and vertical stripes on an SVG canvas. The stripes are filtered through mask elements that reveal different symbol glyphs—circles, crosses, and other d3.symbol shapes—positioned along the center. The code uses d3.select, d3.range, and d3.symbol to generate the paths, with masks applied via SVG attributes. The artwork alternates mask inversion to create contrasting positive and negative space across the full window dimensions.

IIgorGorin00

86% match

Loading thumbnail…

Full Fork of Fork of Sol LeWitt Reproduction with D3

A grid of horizontal and vertical striped rectangles is revealed through two overlapping masks, creating a dynamic composition where the stripes intersect and fade. The visualization uses D3 v7's `select`, `range`, and `join` to generate 100 rows and columns of semi-transparent rectangles. Two SVG masks, each containing a large circle symbol from `d3.symbol`, invert their fill to selectively hide and show portions of the stripe layers, producing a lens-like effect. The rendering is entirely SVG-based, with masks applied via `.attr('mask', ...)`.

Ppawelsapiecha

86% match

Loading thumbnail…

Fork of Fork of Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v7 and SVG. It generates two sets of striped rectangles—horizontal and vertical—layered over each other. The code applies two complementary SVG masks, each containing a row of D3 symbol shapes, to selectively reveal or hide parts of the grid. The masks are created programmatically with the `renderMask` function, which uses `d3.range`, `d3.symbol`, and `d3.symbols` to position the mask shapes across the canvas. The final result creates an intricate, textured interplay between the geometric lines and the symbol cutouts.

ZzolboBatsaikhan

86% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 to generate overlapping striped rectangles and symbol-based masks. The visualization shows a grid of horizontal and vertical bars filtered through two inverted mask layers, each containing a row of D3’s built-in symbol shapes (circles, crosses, diamonds, squares, stars, triangles, and wye). The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct SVG elements dynamically, rendering directly into the browser window with no external data source.

Ccardoza-IPH

86% match

Loading thumbnail…

Fork of D3 Starter

This example generates a grid of horizontal and vertical stripes that intersect to create a geometric pattern. It uses SVG masks with circles to reveal or hide different sections of the stripes, producing a composition reminiscent of Sol LeWitt’s wall drawings. The code leverages D3 v7 selection methods, including `select`, `append`, and `join`, along with `range` to create 100 rectangles for each direction. The visualization is fully responsive, sized to the browser window, and includes hover effects that change the fill color to magenta.

YYiorgos Bagakis

86% match