Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Sol Lewitt All Shapes

Public visualization

Viewing a saved revision (read-only)

67c21c37132a4b78b3d63fc5cf2d4e33

Sol Lewitt All Shapes

0 stars0🌍 Public
JJoel Wilson
Last edited Nov 7, 2024
Created on Nov 7, 2024

This example reproduces a Sol LeWitt-inspired drawing using overlapping geometric masks. The visualization displays a grid of black bars (vertical and horizontal) that intersect with two rows of outlined circles, created by applying two distinct SVG masks—one inverted and one not—to the bar patterns. The code uses D3.js (v6) to dynamically generate the scene, calculating bar placement based on the browser window’s dimensions. It leverages D3’s `selectAll`, `range`, and `join` methods to efficiently append and configure SVG elements, while `d3.symbol` generates the circle paths. The rendering is fully SVG-based within a React-free environment.

AI-generated description

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

See also React Starter.