Skip to main content
100%

SolLeWitt D3 - Single Image to Multiple Images

✓ Published0🌍 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

MIT Licensed

Similar vizzes