Chromatic Hover Sol LeWitt Art with D3

100%

Chromatic Hover Sol LeWitt Art with D3

✓ Published0🌍 Public

Last edited Oct 22, 2022

Created on Oct 22, 2022

This example generates an abstract, grid-based composition inspired by Sol LeWitt, rendered as an SVG using D3.js. Two sets of thin rectangular strips, one horizontal and one vertical, are drawn across the full screen and masked by overlapping circular regions, creating a dynamic interplay of visible and hidden lines. A CSS animation continuously toggles the SVG’s fill and background colors between black and white, producing an inverted chromatic hover effect. The code relies on D3 selections, `range()`, and SVG `mask` elements to construct and layer the visual.

AI-generated description

Creating Sol LeWitt Art with SVG and D3. Get it As seen in Right in Black & White Episode 4

MIT Licensed

Similar vizzes

Loading thumbnail…

Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a full-screen SVG grid of overlapping horizontal and vertical bars. Two distinct masks, created with inverted black-and-white shapes from D3’s `symbol` API, selectively reveal or hide portions of the grid, producing layered, intersecting patterns. The code uses D3’s `select`, `range`, and `join` methods to efficiently generate and update the 100 rectangles per orientation, while the `mask` elements dynamically apply the symbolic clipping paths. The final visualization is a clean, generative art piece driven entirely by SVG and D3’s declarative API.

Jjmetzg11alpine

79% match

Loading thumbnail…

LeWitt Repr with D3

This example uses D3 v3 to recreate Sol LeWitt’s geometric wall drawings as an interactive SVG. Two alternating stripe patterns—horizontal and vertical—are clipped by two masks, each divided into alternating black-and-white bands. Within each band, a different D3 symbol (from `d3.symbols`) appears in the inverted color, creating a shifting mosaic of shapes and lines. The SVG scales to the full window, and a CSS `:hover` rule slowly transitions the page background to green over three seconds.

CCaroline Ghisolfi

79% match

Loading thumbnail…

Full Sol LeWitt kind of reproduction with D3

This example uses D3 to generate a full-screen SVG reproduction of a Sol LeWitt–style geometric drawing. It renders two alternating sets of vertical and horizontal stripes, each partially masked by rows of D3’s built-in symbol shapes (including circles, crosses, and diamonds). The code leverages `d3.range`, `d3.symbol`, and SVG `<mask>` elements to create the overlapping optical effect, with the masks alternating between inverted and normal fill modes. All drawing is done in the browser using D3 v6 and SVG.

VValentine Solonechnyi

78% match

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js in a React application, rendered as SVG. It shows a grid of horizontal and vertical rectangles that are partially revealed through two circular masks, creating an intersecting crosshatch pattern. The code uses `d3.select` and `d3.range` to generate 100 stripes in each direction, with alternating fills applied via SVG `mask` elements. Two separate masks—one inverting the circle’s effect—control visibility, producing a dynamic interplay between the grid lines and the central circular reveal. The visualization runs full-window, adapting to the viewport dimensions.

Ddalia.miliauskaite@me.com

78% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

A Sol LeWitt-inspired generative drawing fills the browser window with a grid of horizontal and vertical stripes. The piece uses two circular SVG masks to invert the stripe pattern within a central circle, creating a subtle visual contrast against the background. The code employs D3.js version 7.8.4, utilizing `select` and `range` from the library to construct SVG elements. Rendering is done entirely through SVG. The `append`, `attr`, and `join` methods are used to build the masks and the striped rectangles programmatically, with the masks defining the visible region.

CClaudio Puggioni

78% match

Loading thumbnail…

Sol LeWitt With D3

This example recreates a Sol LeWitt wall drawing using D3.js to render layered geometric abstractions in SVG. The visualization combines horizontal and vertical striped rectangles with concentric arc paths, all filtered through SVG masks that selectively reveal or hide portions of each shape across the viewport. The code uses D3 selections with `range()` to generate repeated elements, `.join()` for data binding, and `mask` attributes to composite intersecting forms. The result is a dynamic, generative composition that responds to the browser window dimensions while echoing LeWitt’s systematic, rule-based artistic style.

Jjony6290

78% match

Loading thumbnail…

Sol LeWitt extended with D3

This example generates an abstract, generative art composition in the browser, extending the style of Sol LeWitt. It displays a grid of horizontal and vertical lines that are partially hidden by two masks, creating a dynamic interplay of shapes. The visualization uses the D3.js library to build the SVG and apply its `symbol` API to draw various symbols within the masks, with the SVG `mask` element controlling visibility. The final image is a large, screen-filling pattern of lines and geometric icon shapes that appear to emerge from the underlying grid.

Llukasreber

78% match

Loading thumbnail…

Sol LeWitt with d3js full shapes

This example generates a grid of horizontal and vertical rectangles using D3’s `select`, `range`, and `join` methods, rendered as SVG. The full screen is filled with thin red lines, while two circular masks—one inverting the other—reveal a solid white circle at the center. The masks are built with D3’s `append` and `attr` calls, creating alternating visible and hidden regions. The code uses D3 v6 and runs entirely in the browser without external data, relying on window dimensions to size the composition.

Iinnocent thomas

78% match