Chin-Long Shu

@clshu·3 public vizzes

SVG Fundamentals

This example demonstrates a basic HTML page that introduces SVG fundamentals through a simple styled message. It uses CSS for layout and typography, with the text “Hello HTML!” rendered as a large centered element. The code relies on standard web technologies—HTML, CSS, and JavaScript—without any external libraries or frameworks. The rendering approach is a single static document, showing how minimal markup can be structured for educational purposes. It does not include interactive behavior, data, or SVG-specific elements beyond the fundamental page setup.

Mar 11, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization displays a simple smiley face built from three SVG circles: a large yellow face with a black outline and two smaller black eyes. The code uses React, loaded via CDN, to render the SVG elements directly in an HTML page, with the face centered at coordinates (480, 250) and eyes positioned symmetrically at offsets from the center. The SVG is configured with a width of 960 and height of 500, and styles in the body remove margins to allow the graphic to fill the viewport. The example appears to be an initial step toward a more complex face.

Mar 7, 2022

Loading thumbnail…

Smiley Face

This example shows a static yellow smiley face drawn with two black eyes on a plain background. The face is rendered as SVG shapes inside an HTML page. The visualization uses React and ReactDOM libraries to render the SVG elements, with the page structured as a single `<svg>` containing three `<circle>` elements for the face and eyes. The simple geometric shapes and fixed coordinates define the entire graphic without any interactive or animated behavior.

Mar 7, 2022