Marc Brüssel

@FLIGHTLAMA·2 public vizzes

Sole Devit

This example uses raw SVG and DOM manipulation in JavaScript to create a striped composition with a circular cutout. A mask containing a black circle reveals vertical black rectangles across a white background, producing a lens-like effect. The code creates SVG elements directly without any library, instead relying on `document.createElementNS` and attribute setters. The 100 rectangles are evenly spaced, while the mask defines the visible circular region at the center of the canvas.

Feb 13, 2023

Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental building blocks of SVG by creating and manipulating vector graphics directly through the DOM. The code uses the `document.createElementNS` API to construct SVG elements programmatically in plain JavaScript, with no external libraries. It renders a simple visualization from scratch, showing how basic shapes and attributes are defined and assembled within an HTML page that loads a single `scripts.js` file. The approach highlights the raw SVG syntax and DOM manipulation techniques that form the foundation for more complex data-driven visualizations.

Feb 13, 2023