Skip to main content
100%

SVG Fundamentals

✓ Published0🌍 Public
PPrasad Sudrik
Last edited Oct 6, 2023
Created on Oct 5, 2023
Forked from HTML Starter

This example demonstrates how SVG masks can create striking visual effects, showing a series of horizontal rectangles that are visible only through a circular cutout in the center of the screen. The code uses d3.select to append an SVG element sized to the window, then binds an array of data points to create the rectangles with varying vertical positions. A dedicated mask element, constructed from a black background rect and a white circle, controls the visibility of these rectangles, revealing them only within the circular region. The rendering approach relies entirely on SVG primitives and the D3 join pattern.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes