cachetetanger

@cachetetanger·4 public vizzes

topographic map

This example displays an abstract topographic map composed of concentric blue contour rings over a green field, with a small label in the corner. Built with React, it renders purely as static SVG shapes—circles and paths—using explicit coordinates and stroke widths. The visualization uses no data or interaction, instead presenting a decorative, stylized terrain motif generated directly in the markup.

Jul 29, 2022

Loading thumbnail…

Fork of SVG Fundamentals

The visualization demonstrates layered SVG path strokes on a solid orange background, creating a geometric composition of angular line work. Each path element is rendered without fill, except one inner path that uses yellow fill, while all strokes appear in yellow with a consistent width of five pixels. The paths are defined using SVG’s `d` attribute with absolute and relative commands like `M`, `l`, and `L`, producing a series of intersecting diagonal and horizontal lines that suggest depth or motion. The example relies on basic SVG markup embedded directly in an HTML document, with CSS styling applied to the `path` elements.

Jul 3, 2022

Loading thumbnail…

face

A stylized face rendered as a static SVG graphic combines geometric shapes: an orange circle for the head, two blue circles for eyes, a triangular path for the nose, and a red ellipse for the mouth. The example uses declarative SVG elements directly in HTML, including `<circle>`, `<path>`, and `<ellipse>`, with attributes like `cx`, `cy`, `r`, and `d` to define positions and shapes. It demonstrates basic vector drawing without JavaScript frameworks or data libraries.

Jul 3, 2022

Loading thumbnail…

svg fundies

This example demonstrates basic SVG shapes—circles, a rectangle, and a line—rendered in a browser. The code uses plain JavaScript and HTML to define SVG elements directly, with no external libraries. It shows how CSS properties like `fill`, `stroke`, `stroke-width`, and `opacity` are applied inline to style each shape. The static composition highlights fundamental vector graphics primitives and attribute syntax, serving as a minimal introduction to SVG rendering in web pages.

Jul 1, 2022