IRSPI

@IRSPI·2 public vizzes

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face constructed from three SVG circles: a large yellow head with a black outline, and two smaller black eyes positioned symmetrically on either side of the center. The face is hardcoded in an HTML file using raw SVG elements with explicit coordinates and attributes, setting the head radius to 245 and the eye radii to 50. No JavaScript libraries or data sources are involved; the rendering relies entirely on the browser’s built-in SVG support provided by the `svg` element and its `circle` children. The page’s CSS hides margins and overflow to display the face cleanly.

Jul 18, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This React-based SVG data visualization draws a smiley face that fills the entire browser window. The face consists of three circles: a yellow head with a black stroke, and two eye circles positioned symmetrically around the center point. The code calculates all dimensions dynamically from `window.innerWidth` and `window.innerHeight`, using constants like `eyeOffsetX`, `eyeOffsetY`, and `eyeRadius` to maintain proportion. It leverages the React 16.9.0 libraries (`react` and `react-dom`) to render the `<svg>` element directly into the DOM, with a `<g>` transform translating the origin to the screen's center.

Jul 18, 2021