LeWitt Circle

100%

✓ Published2🌍 Public

Last edited Nov 26, 2023

Created on Nov 26, 2023

This example creates a circular pattern of alternating horizontal and vertical black and white stripes by layering two sets of SVG rectangles. Using D3.js `select`, `append`, and `join` methods with a `range` of 100, the rectangles are masked to reveal the circle. The first mask `circle-mask` applies a black background with a white circle, while `circle-mask-2` inverts this, producing the final geometric design. The SVG viewport spans the full browser window.

AI-generated description

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

Similar vizzes

Loading thumbnail…

FULL LeWitt Circle

This example generates a visual grid of thin horizontal and vertical lines that form a woven pattern across the full screen. A circular arrangement of seven distinct D3 symbols, created with `d3.symbol` and `d3.symbols`, is applied as two complementary masks—one inverted and one not—to reveal the line intersections through the shapes. The SVG is built directly with D3 selections, dynamically sized to the browser window, and uses `range(n)` to generate 100 lines in each direction.

Aadventuresenglish.info@gmail.com

86% match

Loading thumbnail…

Sol Lewitt Project

This example generates a geometric abstraction inspired by Sol LeWitt, layering horizontal and vertical striped rectangles over an SVG canvas. Two circular masks create a contrast where a central white circle reveals the full pattern, while the surrounding area inverts it. Using D3’s `select` and `range`, it appends over one hundred rect elements per axis, with widths and heights derived from window dimensions. The SVG `mask` elements, defined with white and black circles, control visibility, producing a precise, grid-based visual composition.

JJohnny Dodge

85% match

Loading thumbnail…

[D3] Le Witt - Masks

This example creates a geometric composition of thin vertical and horizontal stripes that cross to form a mask-like circular pattern. Two SVG masks—one revealing a filled circle and another showing a circle cut out of a full rectangle—control the visibility of the stripes, which are generated as rectangles using D3's `range` and `join`. The visualization uses `d3.select`, `.append`, and `.attr` within a React framework, rendering entirely as SVG with D3 v6.

WWRCIECH

85% match

Loading thumbnail…

LeWitt Recreation w/ D3

This example recreates a Sol LeWitt-style geometric drawing using D3.js v7 and SVG rendering. It displays a grid of horizontal and vertical black bars overlaid on a full-window canvas, with a circular mask creating a central void. The code uses D3's `select`, `range`, and `join` to generate 100 rect elements in each orientation, while SVG `mask` elements with white and black shapes define the visible regions. The result is a minimalist pattern that demonstrates simple masking and data-driven shape generation.

MMarvin Frede

84% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing by layering two sets of thin, uniformly spaced rectangles—one horizontal and one vertical—across the full browser window. The rectangles are masked by overlapping circles, creating a bold geometric interplay of lines and negative space. Built with D3 v3 and React, the code uses `d3.range` to generate 100 elements per axis, `svg.append` for the SVG structure, and custom mask definitions (`circle-mask` and `circle-mask-2`) to alternate white and black circular cutouts. The result is a clean, minimalist pattern that responds to the viewport size.

LLewis Ward

84% match

Loading thumbnail…

Sol Lewitt

This example creates a generative black-and-white pattern inspired by Sol LeWitt’s geometric art. It uses raw SVG elements created via the W3C DOM API, including a circular mask and 100 horizontal rectangles, to show alternating stripes visible only within a central circle. The code dynamically sets the SVG dimensions to match the browser window and positions the circle at the viewport center. No external libraries are used; everything is built with plain JavaScript and SVG’s `mask` and `rect` elements.

Vvikrantbhurke

83% match

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

83% match

Loading thumbnail…

SVG Sol LeWitt vertical

This example generates an SVG visualization inspired by Sol LeWitt’s geometric wall drawings. It shows a grid of alternating horizontal and vertical black stripes that are visible only within a circular mask centered on the screen. The code uses the Document Object Model’s `createElementNS` method to construct SVG elements, including a mask containing a circle, and appends 48 horizontal and 48 vertical rectangles. The rectangles are clipped by the mask via the `url(#circle-mask)` reference, producing a circular cutout effect against a full-window backdrop.

Mmax-31

83% match