Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of React Starter

Public visualization

Viewing a saved revision (read-only)

b06ad846efa841eabdd884ba23999cf3

Fork of Fork of React Starter

0 stars1🌍 Public
EEnoch Ssentumbwe
Last edited Jul 15, 2024
Created on Jul 15, 2024

This example uses React and D3 to create a full-window SVG grid of horizontal and vertical stripes. A pair of circular SVG masks selectively reveals the underlying patterns: one circle is punched out of a white rectangle to show the vertical stripes, while a second white circle exposes the horizontal stripes. The code builds the masks and rectangles imperatively via D3's `select` and `join`, with `range` generating the stripe positions. The result is a simple, mask-driven optical illusion where the two stripe directions appear only within their respective circular regions.

AI-generated description

React Starter code.