Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

First D3 Thing

Public visualization

First D3 Thing

0 stars0🌍 Public
MMichael Bell
Last edited Dec 1, 2023
Created on Nov 30, 2023
Forked from HTML Starter

A full-screen SVG composition layers 100 horizontal and 100 vertical strips, each masked by a central circle. Two SVG masks (`circle-mask` and `circle-mask-2`) define the visible regions: the first reveals a black circle on a white background, while the second inverts it. The strips alternate orientation, with horizontal bands shown through the first mask and vertical bands through the second, creating a cross-hatched grid with a circular cutout in the center. The code uses D3's `selection` API to build the scene by appending elements to the SVG container, with dimensions tied to the browser window size.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed