ankacha

@ankacha·2 public vizzes

Fork of SVG Fundamental

This example demonstrates how SVG masks can selectively reveal or hide parts of overlapping shapes. It creates two circular masks—one filled red for horizontal stripes and another inverted with a white background and black circle for vertical stripes. Using the D3.js `selection` module for logging, the code builds 40 horizontal and vertical rectangles via the DOM API, applying each mask URL to alternate stripe orientations. The result is a crosshatch pattern formed by masked rectangles over a full-screen SVG, showcasing mask composition and reuse.

Dec 31, 2025

Loading thumbnail…

SVG FUNDAMENTALS

This example demonstrates fundamental SVG rendering by creating a full-screen canvas filled with evenly spaced vertical stripes. The code constructs an SVG element using the raw `document.createElementNS` API with the SVG namespace, then iterates across the viewport width in 200-pixel increments to append thin rectangular shapes. Each rectangle is positioned with an `x` attribute and given a constant width of 10 pixels, stretching to the full window height. The result is a minimalist visual pattern that shows how basic SVG primitives can be dynamically generated and styled through JavaScript.

Dec 31, 2025