Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
KKj
Last edited Feb 12, 2023
Created on Feb 12, 2023

This visualization reproduces Sol LeWitt’s drawing as an animated grid of horizontal and vertical bars. The bars are revealed through masked symbol shapes, with alternating visibility that creates a dynamic interplay between line and form. Built with D3 v3 in React, it uses `select`, `range`, `symbol`, `symbols`, `scaleBand`, and `easeLinear` to generate SVG elements and animate transitions. A custom mask function applies white and black fills to alternate regions, while the underlying JavaScript drives the 50-second vertical bar animation.

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 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
91% 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
91% 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
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction D3

This visualization reproduces Sol LeWitt’s geometric art by rendering 100 horizontal bars of varying heights, arranged to form an abstract pattern. The bars are drawn as SVG rectangles, each with a fixed width and height, positioned vertically based on an index from `d3.range`. A circular `mask` clips the rectangles, creating a rounded composition. The code uses D3 v7’s `select` and `range` to bind data and join elements, with a minimal black-on-white aesthetic. The rendering is static, driven purely by the data values from the range, without interaction or animation.

DDyor69
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, generating an intricate grid of overlapping horizontal and vertical bars. The visualization uses two mask layers to create alternating colored regions, with the second mask inverted to produce a dynamic contrast pattern. Rendered as SVG, the code employs D3's `scaleBand`, `range`, `symbol`, and `symbols` APIs to position and shape the elements, while `join` manages the data-driven rect and path creation. Layout adapts to the browser window size, with 120 bands across the full viewport.

Mmaximus2581
90% match
Loading thumbnail…

Fork of Sol LeWitt-d3-2

This visualization generates a grid of horizontal and vertical bars across the full browser window, then applies circular SVG masks to reveal a bold geometric composition. Using d3 selections and `range()`, it appends 100 rectangles in each orientation, with a black-and-white mask pair creating a contrasting ring pattern at the center. The code uses D3 v6 with `select`, `range`, and `join`, rendering to SVG while dynamically sizing to the viewport. This mirrors Sol LeWitt’s minimalist wall drawings through a React-compatible, single-file example.

Bbillzhou2005
90% 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
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction Final with D3

This example reproduces a Sol LeWitt-inspired geometric artwork using D3.js and SVG rendering. It displays a grid of horizontal and vertical black bars that are partially revealed through two circular mask effects, creating intersecting line patterns across the full viewport. The visualization uses d3.select and data joins to generate 100 rectangle elements for each orientation, while SVG mask elements with circle shapes control which portions of the lines remain visible. The bars are positioned mathematically based on array indices, with the masks centered in the window to produce the layered optical effect.

Kkwambokar
90% match