Khaihuyennguyen

@Khaihuyennguyen·3 public vizzes

Fork of Let's Make a Face Part I

This example shows a static, React-rendered smiley face constructed from three SVG circles: a yellow face outline and two black eyes. It uses React 18 and ReactDOM to mount an SVG element programmatically into the page’s root div, with the face’s facial features hardcoded as circle coordinates and radii. The code also includes a raw SVG fallback in the HTML, demonstrating the same visual without the React layer.

Jun 24, 2021

Loading thumbnail…

Patrick Face I

A single purple circle with a black outline forms a face, with two smaller black circles positioned as eyes on a blank white background. The SVG rendering uses hardcoded coordinates and radii for the circle elements, placing the face at the center of a 960 by 500 canvas. The code directly specifies the facial features rather than generating them programmatically.

Jun 24, 2021

Loading thumbnail…

Hello HTML

A minimal HTML page renders a single SVG circle centered in a 960×500 viewport. The circle uses a fixed radius of 200, with no fill or stroke specified. The page sets its body margin to zero and hides overflow to create a clean, full-frame display. This example demonstrates the basic structure of embedding SVG graphics directly in an HTML document, relying only on native browser SVG support without any JavaScript libraries or data sources.

Jun 17, 2021