Skip to main content
SimilarExport ZIP
100%

Fork of Sol Lewitt reproduction itv d3 correctly

✓ Published1🌍 Public
Cclara7227
Last edited Nov 9, 2022
Created on Nov 9, 2022

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt With D3

This example recreates a Sol LeWitt-style generative drawing using D3.js within a React framework, rendered as SVG. The code builds layered horizontal and vertical black rectangles, masking portions with white and black shapes to create intersecting bands, plus a set of concentric elliptical paths that peek through a central circular opening. It uses D3’s `select` and `range` functions to generate data and chain SVG element creation, with `mask` elements controlling visibility. The composition fills the browser window, producing a geometric, abstract pattern.

Ccraig harbottle
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style grid of horizontal and vertical bars, with the pattern masked to reveal a central circle. It uses D3’s `select` and `range` to generate 100 rectangular strips in each direction, while two SVG `<mask>` elements—one inverted—combine to create the circular cutout effect. The code runs in a React environment and renders vector graphics as SVG.

Ccharlieronchetti@gmail.com
91% 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
91% 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
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…

Fork of Sol Lewitt reproduction itv d3

This interactive piece displays two intersecting grids of rectangles within a circular mask, evoking Sol LeWitt's geometric wall drawings. The visualization pairs overlapping horizontal and vertical bands, with one grid serving as a negative mask to create a dynamic visual interplay between filled and empty space. Built with React and D3.js, the code uses the `select` API to construct SVG elements, the `range()` helper to generate iterations, and a layered masking technique to clip the rectangular pattern into a central circular composition. The result is a clean, generative study in form and negative space.

Cclara7227
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction With D3

This visualization reproduces a Sol LeWitt-inspired geometric drawing using D3 v6 and SVG rendering in a React context. It shows a grid of horizontal and vertical rectangles, each with a circle-shaped mask, creating an intersecting pattern that reveals or hides lines depending on mask polarity. The code uses `d3.select`, `d3.range`, and SVG `mask` elements with black and white fills to produce the effect over a full-window canvas. Rendering relies on SVG attributes for positioning and sizing, with no external data source beyond generated ranges.

Wwgloss
91% match
Loading thumbnail…

Fork of 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.

IissaHalabi99
91% match