Christy Grothues

@Khryssty·2 public vizzes

Fork of Smiley Face Part II

This example shows a large yellow smiley face that scales to fill the browser window. The face is rendered as an SVG, with the head, eyes, and mouth positioned using screen dimensions. React 16.9 manages the component structure, while ReactDOM renders it into the root element. The code uses SVG circle elements and a transform to center the face, with the head radius computed from the window height.

Jul 18, 2023

Loading thumbnail…

Smiley Face Part 1

This example draws a simple smiley face using Scalable Vector Graphics (SVG) within a minimal HTML page. The face consists of a large yellow circle with a black outline, representing the head, and two smaller unfilled circles as eyes, positioned symmetrically on the upper half. The rendering relies on native SVG elements such as `<circle>` and attributes like `cx`, `cy`, `r`, `fill`, and `stroke-width`. The page uses an embedded stylesheet to remove margins and hide overflow, ensuring the graphic fills the viewport cleanly without any scripting or external libraries.

Jul 18, 2023