catherinening

@catherinening·3 public vizzes

Fork of Smiley Face Part II, w/ notes

This example shows a yellow smiley face rendered as a scalable vector graphic, with the face centered and sized to fill the browser window. The code uses React’s `ReactDOM.render` to mount an SVG component that draws circles for the head, eyes, and mouth area. The face positions and radii are computed from `window.innerWidth` and `window.innerHeight`, with the head’s radius derived from the viewport height. The SVG uses a `<g>` transform to center the drawing, and the face is missing its mouth, leaving an unfinished expression.

Dec 21, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I, w/ notes

This visualization is a static SVG face made from three circles: a large yellow head with a black outline and two smaller black eyes. The code uses raw SVG elements—`circle` and `svg`—positioned with explicit `cx` and `cy` coordinates. The page is set to hide scrollbars via CSS, and the layout is fixed at 960 by 500 pixels. It serves as a simple, annotated example of basic SVG shape composition, likely a part of a tutorial series.

Dec 21, 2022

Loading thumbnail…

Smiley Face Part I

A static SVG drawing presents a yellow circle with a black outline, positioned at the center of a 960 by 500 canvas, alongside two smaller black circles representing eyes. The rendering uses explicit SVG `<circle>` elements with fixed coordinates and stroke properties, without any interactive or animated behavior. The composition forms the upper half of a smiley face, omitting the mouth. The code defines the face’s dimensions directly in the markup, with the eyes placed symmetrically around the center point.

Nov 4, 2022