Skip to main content
SimilarExport ZIP
100%

Sol Lewwit D3 symbol

✓ Published0🌍 Public
PPeiyang Li
Last edited Apr 10, 2023
Created on Apr 10, 2023

This example generates a full-screen SVG pattern inspired by Sol LeWitt, using two sets of parallel stripes—horizontal and vertical—that intersect to create a grid. A mask with a circular symbol cuts a ring shape through the pattern, while a second, inverted mask reveals a contrasting ring effect. Built with React and D3.js, the code uses `d3.select`, `d3.range`, and `d3.symbol` to construct the marks and masks, with dimensions tied to `window.innerWidth` and `window.innerHeight`. The rendering relies entirely on SVG elements and attributes.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewwit D3

This example recreates Sol LeWitt’s wall drawing aesthetic using D3.js and SVG. Two sets of 100 horizontal and vertical stripes are rendered across the full viewport, each configured with a mask that reveals a circular region in the center. The circle masks create an interplay between the two orientations, highlighting where horizontal lines show through one mask and vertical lines through the other. The code uses `select`, `range`, and data joins from D3 v7, with SVG masks and rectangles composing the visual.

PPeiyang Li
90% match
Loading thumbnail…

d3 sol lewit full

This example generates a geometric line pattern using D3.js and SVG, rendering a grid of horizontal and vertical rectangles across the full browser window. Two masks, one inverted, create a cross-shaped cutout in the center by selectively hiding or revealing the rectangular bands. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs to build the SVG elements, while `mask` elements with paths control the visibility. The design is inspired by Sol LeWitt’s minimalist wall drawings, with the cross motif emerging from the overlapping masked layers.

HHéloïse Feldmann
90% match
Loading thumbnail…

Full Sol Lewitt with D3

This example generates a full-screen SVG pattern of alternating horizontal and vertical stripes, with Sol Lewitt-inspired geometric symbols appearing through mask cutouts. Two separate mask layers—each containing a row of D3 symbol shapes—reveal or hide the stripe groups to create layered, interlocking compositions. The visualization uses D3 v6 APIs including `select`, `range`, `symbol`, and `symbols`, with masks defined via `append('mask')` and filled using `rect` and `path` elements. Data is procedurally generated with `range(n)` rather than loaded from an external source.

AAlp
89% match
Loading thumbnail…

Full Sol LeWitt D3

This example creates a grid of horizontal and vertical stripes whose visibility is selectively revealed through two SVG masks, positioned over symbol-shaped cutouts. The mask pattern is generated using D3’s `range` and `symbol` APIs, alternating between normal and inverted masks to produce a complementary crossover effect. The visualization renders entirely with SVG, using dynamic `mask` URLs applied to each rectangle. The code leverages D3 v7 selections, joins, and the `symbol` generator to construct geometric shapes across the full viewport.

JJamie
89% match
Loading thumbnail…

Full Sol LeWitt with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3 and SVG. It builds a grid by rendering horizontal and vertical rectangles, each filtered through a mask that reveals alternating symbol shapes. The code uses `d3.select`, `range`, `symbols`, and `symbol` to draw the mask patterns, with `join` for data-driven elements and `mask` attributes for clipping. The visualization fills the entire browser window, with parameters like `n = 100` controlling the grid density and symbol spacing.

Ddalia.miliauskaite@me.com
89% match
Loading thumbnail…

Full Sol LeWitt Reproduction With D3

This example reproduces a Sol LeWitt-style drawing using D3.js, rendering a full-screen SVG composed of 100 horizontal and 100 vertical stripes that are masked by two overlapping circular forms. The code directly uses `d3.select`, `d3.range`, and the `join` API to append and position the rectangles, while `d3.symbol` and `d3.symbols` generate the circular mask paths. The two masks, one inverted, are applied via the `mask` attribute to create a subtle interplay between the grid and the geometric shapes. The visualization responds to the browser window’s dimensions, as the width and height are taken from `window.innerWidth` and `window.innerHeight`.

Wwgloss
89% match
Loading thumbnail…

Full Sol Lewitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of alternating horizontal and vertical stripes across the full screen. Two masks—one inverted—cut circular symbol shapes from the stripe patterns, creating overlapping geometric forms. The code uses d3.select, d3.range, d3.symbol, and d3.symbols to render SVG paths, with each mask applied via SVG mask elements. The result is a dynamic, screen-filling composition that highlights D3's ability to create intricate generative art from simple primitives.

PPhan Nguyen
89% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example shows a large grid of horizontal and vertical stripes that appears to be interwoven, with geometric symbols such as circles, diamonds, and triangles emerging from the pattern. It generates 100 striped bands in each direction and uses two SVG masks to selectively hide portions of the grid, creating the illusion of layered shapes. Built with D3 v7 and React, the code uses `select`, `range`, `symbols`, and `symbol` to draw the mask paths, with `renderMask` applying the inverted fill logic. The rendering approach is purely SVG-based, sized to the full browser window.

Ccharlieronchetti@gmail.com
89% match