Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 JS

Public visualization

D3 JS

0 stars1🌍 Public
TTehran Mammadov
Last edited Jun 15, 2022
Created on Jun 14, 2022
Forked from svg circle double

An SVG grid of 100 horizontal and 100 vertical rectangles covers the full viewport. Two circular masks, defined via D3's `mask` element, create a lens-like effect: the first mask exposes a central white circle outlined by black-filled rectangles, while the second inverts the fill to produce a complementary pattern. Using D3 v7's `join` method, the code binds `d3.range` data to generate the rectangles, with each strip sized 10 pixels thick and spaced 20 pixels apart. The overlapping masks reveal alternating stripe orientations, forming a dynamic moiré-like crosshatch within the central circular region.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed