crajy030@mymail.unisa.edu.au

@crajy030·3 public vizzes

SVG Fundamentals

This example demonstrates basic SVG shape rendering in a static HTML document. It shows several primitive shapes—circles, a rectangle, and a line—positioned on a 700×500 canvas. The code uses the native SVG API directly, with inline attributes like `cx`, `cy`, `r`, `x`, `y`, `stroke`, and `fill` to define geometry and styling. No JavaScript libraries are involved; the shapes are drawn declaratively in markup, and the only script is a console log. The visual output highlights how SVG handles vector graphics through XML elements.

Oct 16, 2025

Loading thumbnail…

Fork of Fork of Hello HTML

A yellow smiley face rendered in SVG fills a 960-by-500 canvas, with two black eye circles positioned symmetrically across a large yellow circle outlined by a thick black stroke. The drawing uses only static SVG elements—a main `<circle>` for the head and two smaller `<circle>`s for the eyes—with no interactive behavior or animation. The HTML document sets the body margin to zero and hides overflow, while the SVG’s coordinates and radius values are manually coded, without relying on JavaScript libraries or data-driven visualization APIs. The rendering approach is plain declarative markup.

Oct 16, 2025

Loading thumbnail…

Fork of Hello HTML

A large yellow circle with a black outline forms the base of a smiley face, centered on a 960 by 500 SVG canvas. Two smaller black circles serve as eyes, positioned symmetrically around the horizontal center. The page uses plain HTML and inline SVG elements—specifically the `circle` tag—to draw the shapes, with the CSS rule `overflow: hidden` on the body preventing scrollbars. No JavaScript libraries are involved; the rendering is entirely static SVG.

Oct 14, 2025