Christopher Campbell

@clccode·2 public vizzes

SVG Exercise

A yellow rectangle with thick navy borders forms the frame of this fixed-size SVG composition. Overlapping red and blue circles are centered inside, while four additional navy lines of varying thickness outline the rectangle’s edges using basic SVG primitives. The demonstration uses inline SVG shapes—`rect`, `circle`, and `line`—with explicit pixel coordinates, stroke widths, and fill colors, showing how layered vector elements can create a simple geometric pattern without any JavaScript or data-binding library.

Jul 17, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes—circles, rectangles, and a line—positioned within a fixed 960×500 coordinate space. It shows how fill, stroke, stroke-width, and radius attributes control appearance, with circles of varying sizes and colors, a yellow rectangle with a navy border, and a diagonal line. The code uses raw SVG markup directly in HTML, with no JavaScript or external libraries, rendering shapes statically via the browser’s SVG engine.

Jul 17, 2022