yl.wang

@wyl1201·2 public vizzes

Create SVG Use JavaScript

This example shows a simple JavaScript approach to generating SVG graphics without any external libraries. The code creates a full-window SVG element and populates it with 100 horizontal rectangle bars, each 10 pixels tall and spaced 20 pixels apart, using the W3C SVG namespace via `document.createElementNS`. The rectangles fill the entire width of the browser window, producing a basic striped pattern that demonstrates programmatic vector graphics creation and DOM manipulation through native browser APIs.

May 9, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates the use of SVG fundamentals by rendering basic geometric shapes—including circles, rectangles, lines, and paths—on a 960 by 500 pixel canvas. The code uses explicit SVG elements within an HTML page, setting attributes like `fill`, `stroke`, and `stroke-width` to control appearance. It shows how to position shapes using `cx`, `cy`, `x`, `y`, and `d` (for paths) directly in the markup. The visualization serves as a bare-minimum introduction to vector graphics without relying on external libraries.

May 8, 2022