Fork of Loop of Sol Lewitt reproduction with d3

100%

Fork of Loop of Sol Lewitt reproduction with d3

✓ Published0🌍 Public

Last edited Dec 3, 2022

Created on Dec 3, 2022

Forked from Loop of Sol Lewitt reproduction with d3

This example reproduces Sol LeWitt’s looping wall drawing using D3 v6 and React. It renders 100 horizontal and 100 vertical SVG rectangles across the full browser window, each masked by a set of geometric symbols from the `symbols` array. The code uses D3’s `select`, `range`, and `symbol` APIs to generate the grid and apply two inverted masks, creating a layered, monochrome composition with alternating visual density.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Sol Lewitt reproduction itv d3 correctly

This example reproduces a Sol Lewitt-inspired geometric artwork using D3 version 6.6.1 in a React environment, rendering to SVG. It generates 100 horizontal and 100 vertical rectangles spaced 20 pixels apart, covering the full viewport. Two SVG masks create circular cutout effects: one masks the horizontal bars with a white circle on black, the other applies an inverse pattern to the vertical bars. The code uses `select`, `range`, `.join('rect')`, and `.attr('mask')` to construct the layered composition dynamically.

Cclara7227

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction Using D3

This example recreates Sol LeWitt’s geometric wall drawings using D3 and React, rendering an SVG that fills the browser window. It draws 100 horizontal striped rectangles, each 10 pixels tall and spaced 20 pixels apart, with a circular mask applied to clip the pattern into a central disc. The code relies on D3’s `select` to build the SVG and mask elements, while width and height derive from `window.innerWidth` and `window.innerHeight`. The approach echoes LeWitt’s instructions-based art, translating his algorithmic rules into generative code.

Nnreinig3@gatech.edu

91% match

Loading thumbnail…

Loop of Sol Lewitt reproduction with d3

This visualization reproduces a Sol LeWitt drawing by layering horizontal and vertical striped rectangles over a grid of 100 lines each, rendered as SVG shapes. The piece uses d3's `range`, `select`, `append`, and `join` APIs to generate the geometry, with mask elements that reveal or hide alternating shapes. Two masks, one inverted, create a loop of contrasting black-and-white symbols from d3's `symbols` array, including shapes like stars and crosses, positioned across the canvas. The code relies on d3 6.6.1 within a React-free HTML page, styling text with Archivo and IBM Plex Sans fonts.

Cclara7227

90% match

Loading thumbnail…

Fork of Full Sol Lewitt Reproduction with D3

This visualization creates a grid of horizontal and vertical bars across the full browser window, using SVG masks to reveal d3 symbols (shapes) from the d3-shape module. It uses the `select`, `range`, `symbols`, and `symbol` functions from D3 v6 to generate a striped pattern with four distinct symbol types as mask cutouts. The code renders 100 rectangles in each orientation, with two masks applied to alternate between light and dark shading on the revealed shapes. The rendering adapts to the window’s dimensions and uses `join` to bind data to SVG elements.

Mmaximus2581

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

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt–style grid using two sets of horizontal and vertical rectangles, each clipped by a circular mask to produce a black-and-white geometric composition. The code uses D3’s `select`, `range`, and `join` to generate 100 stripes in each direction, while `d3.symbol` and `symbols[1]` draw a diamond-shaped mask path. Two SVG masks alternate inverted fills, revealing or hiding parts of the grid. The visualization runs in React, renders as SVG, and adapts to the full browser window size.

MMark Christian

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js within a React framework, rendered as an SVG. It displays a grid of horizontal and vertical rectangular stripes that are partially revealed through two circular masks, creating a crosshatched pattern with a central circular void. The code leverages D3's `select`, `range`, and `.join()` API to generate the stripes, while SVG mask elements define the visibility zones. The visualization dynamically sizes to the browser window, demonstrating a blend of generative art and data-driven DOM manipulation.

MMark Christian

90% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using overlaid horizontal and vertical stripes, each masked by a circle at the center. The composition reveals a square grid of lines intersecting within a circular boundary against a contrasting background. The visualization uses the D3.js library (v6.6.1) through a React interface, rendering SVG elements via the `select`, `range`, and `append` APIs. It constructs masks with `attr` to define the circular cutouts, and generates the 100 stripes per direction using D3's `join` for efficient data-driven element creation.

Mmaximus2581

89% match