Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Learning svg with javascript

Public visualization

Viewing a saved revision (read-only)

4f41b673c61441078df5f0b969113e8a

Learning svg with javascript

0 stars0🌍 Public
GGabriel Dantas
Last edited Jul 7, 2021
Created on Jul 7, 2021
Forked from HTML Starter

This example renders 100 horizontal rectangles that span the full window width, each stacked at 20-pixel intervals. The rectangles are drawn as SVG elements using D3’s `select`, `join`, and attribute setters, with a `mask` attribute referencing a `circle-mask` defined elsewhere. Data is generated programmatically via `Array.from`, mapping index values to `y` positions and fixed widths and heights. The code demonstrates a minimal React-free workflow, appending an SVG to the body and sizing it to `window.innerWidth` and `window.innerHeight`.

AI-generated description

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

See also React Starter.