Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SolLeWitt D3 - Single Image to Multiple Images

Public visualization

Viewing a saved revision (read-only)

8cb5a3701b884a228b453cb8714f3734

SolLeWitt D3 - Single Image to Multiple Images

0 stars0🌍 Public
JJun Alvarado
Last edited Aug 17, 2022
Created on Aug 17, 2022

This example renders two alternating grids of horizontal and vertical bars, each masked by different geometric symbols to create a layered composition. Using React with D3 v7, it generates SVG rectangles based on window dimensions and applies SVG masks containing D3’s built-in symbol shapes. The code defines a `renderMask` function that creates white or black mask backgrounds with inverted symbol fills, then applies these masks to the bar groups. The visualization demonstrates how D3 selections, data joins, and mask operations combine multiple images into a single viewport.

AI-generated description

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

See also React Starter.

Notes M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Bezier curve T = smooth quadratic Bezier curve A = elliptical Arc Z = closepath