slyfer-cell

@slyfer-cell·2 public vizzes

Java Script

This example displays a blank, fixed-size SVG canvas. It creates an SVG element and appends it to the document body, then attempts to add a 100-by-100 pixel rectangle. The code uses the native DOM APIs `document.createElementNS` and `setAttribute` for SVG construction, but the rectangle is mistakenly appended to `svg.body` rather than the SVG root, so the rectangle never renders. The visualization ultimately shows only an empty 960×500 viewport.

Jun 5, 2022

Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental building blocks of SVG by constructing a single rectangle using raw DOM manipulation. The code programmatically creates an SVG element and a rect child node via the `document.createElementNS` API, setting explicit width and height attributes of 960 by 500 pixels for the canvas and 100 by 100 for the shape. It shows how to manually build SVG graphics without any visualization library, relying solely on native browser methods and CSS styling for the page layout. The rectangle is appended directly to the body, illustrating the basic SVG creation workflow.

Jun 4, 2022