avohland16

@avohland16·3 public vizzes

Smiley Face Part II

This example renders a full-screen smiley face using React and SVG. The face is dynamically sized to the browser window, with a yellow circle head, black stroke, two eyes, and no mouth. The code uses ReactDOM to mount a component that calculates dimensions from `window.innerWidth` and `window.innerHeight`, then positions circles relative to the center using SVG transforms and coordinates like `eyeOffsetX` and `eyeRadius`.

Jul 23, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example draws a simple cartoon face using Scalable Vector Graphics (SVG) markup. It shows a large yellow circle for the head with a thick black stroke, and two smaller unfilled circles positioned as eyes on a 960 by 500 viewport. The visualization is built with plain HTML and CSS, using absolute pixel coordinates for each circle’s center and radius. JavaScript and React are not actively used in the rendering logic; the face is static and defined entirely within the `index.html` file.

Jul 23, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a large yellow smiley face drawn as a scaled SVG that fills the browser window. The face adapts to the viewport size by calculating its center and radius from `window.innerWidth` and `window.innerHeight`. Using React and ReactDOM, the code defines static circle elements for the face, eyes, and mouth within an SVG container, with positioning handled by a `g` transform and attributes like `eyeOffsetX` and `mouthRadius`. The rendering relies entirely on SVG primitives, with no interaction or animation.

Jul 22, 2021