Fork of LeWitt Recreation w/ D3

100%

Fork of LeWitt Recreation w/ D3

✓ Published0🌍 Public

Last edited Sep 28, 2023

Created on Sep 28, 2023

This example presents an abstract, geometric composition inspired by the artist Sol LeWitt, rendered directly in the browser. It displays a dynamic field of intersecting lines and shapes that continuously rearrange themselves. The visualization relies on the D3.js library (version 7.8.5) to generate and update the visual elements. The underlying code uses D3's core API for creating and manipulating SVG graphics, driven by an implicit force-directed layout that causes the forms to drift and settle over time, all within a minimal HTML page.

AI-generated description

A bare minimum HTML page demonstrating use of D3 following the course of Curran Kelleher on YouTube

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece, generating a geometric arrangement of lines and shapes in the browser. It uses d3.forceSimulation to position nodes and compute the drawing’s structure, then renders the result on a blank canvas with SVG or similar D3 drawing methods. The artwork’s composition is driven entirely by the simulation’s layout, with no external data input, creating a generative, algorithmic interpretation of LeWitt’s minimalist style.

DDutch Hansen

85% match

Loading thumbnail…

Fork of LeWitt Recreation w/ D3

This example recreates a LeWitt-style drawing using an SVG canvas populated with two intersecting sets of 100 rectangular bars—horizontal and vertical bands that form a grid. A circular mask is applied to the horizontal bars, and an inverted circular mask is applied to the vertical bars, producing a central circle where only the vertical lines appear, while the surrounding area shows both orientations. The visualization uses D3 version 7, specifically the `select` and `range` functions, to generate the rectangles and apply SVG mask elements dynamically based on the window dimensions.

CChirag

85% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This fork of a Sol LeWitt reproduction uses D3.js to generate an abstract geometric composition. The visualization displays a grid of alternating horizontal and vertical bars that overlap to create a dynamic pattern across the full browser window. It builds two layered sets of rectangles, each masked with a pattern derived from D3’s `symbol` API—one mask uses the standard symbol set, the other an inverted version. The `scaleBand` function positions the masks, while `select` and `join` manage SVG elements. The result mirrors LeWitt’s minimal, rule-based aesthetic using interactive vector graphics.

Xxscotta@yahoo.com

84% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, generating a grid of thin horizontal and vertical rectangles across the full browser window. The visualization appears as a dense crosshatch pattern, with a circular region in the center where the lines are inverted—dark lines show through a light circle, while the surrounding area has light lines on a dark background. The code builds an SVG, creates rect elements with D3’s `range` and `join` methods, and applies two SVG masks with circles to achieve the contrasting effect.

FFerasMorsi

84% match

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction Final with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical black lines layered over the full viewport. The lines are clipped by two circular masks centered on the screen, creating a crosshatched pattern that fades into blank space beyond the circle boundaries. The code uses D3 selections and the `join` pattern to append SVG `rect` elements, with `mask` elements defining the visible regions via white and black circles. The artwork is rendered entirely in SVG using D3 v7.

Kkwambokar

84% match

Loading thumbnail…

Fork of Fork of Full of Joe LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece as a generative drawing in the browser. It creates a grid of horizontal and vertical lines that are partially revealed through two distinct masks, resulting in an intersecting pattern of geometric shapes. The visualization uses D3.js version 6.6.1, specifically the `select`, `range`, and `symbol` APIs, to render SVG elements based on procedural rules. The code generates a hundred stripes in each direction and applies mask filters to alternate their visibility, producing a complex, layered composition that mimics the artist's systematic style.

Ccssergio

84% match

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 version 6.6.1, rendering directly to an SVG element. The visualization fills the entire browser window by setting the SVG dimensions to the screen width and height, and begins by drawing a single black circle at a fixed offset. The code imports `select` and `range` from D3, though only `select` is currently used to append the SVG and circle, leaving the artwork's full structure incomplete. The rendering approach relies on basic SVG primitives within an HTML page that hides scrollbars for a clean, full-screen presentation.

Aaissatheprogrammer

83% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example generates an abstract geometric composition inspired by Sol LeWitt, using D3 v6 to create intersecting striped rectangles with dynamic masking. The visualization alternates horizontal and vertical bands of thin lines, with masks that switch between filled and hollow symbol shapes—including circles, diamonds, and crosses—at regular intervals. Rendering in SVG, the code uses `d3.select`, `d3.range`, `d3.scaleBand`, and `d3.symbol` to position 120 strips across the viewport and apply patterned cutouts, producing a rhythmic interplay of line, shape, and negative space.

Mmkarnam.mahendra@gmail.com

83% match