John Keatley

@JohnKeatley·2 public vizzes

Fork of Smiley Face Part II

This example shows a smiling face rendered as a responsive SVG that fills the browser window. The face consists of a yellow circle with a black stroke for the head, two black eye circles, and a curved mouth drawn using React's JSX syntax. The code uses React and ReactDOM to render the SVG elements, with dimensions and positions calculated from the window's width and height. The static values for eye offset, eye radius, and mouth radius are defined as constants.

Mar 2, 2021

Loading thumbnail…

Smiley Face Part 1

This example draws a static smiley face using only SVG primitives within an HTML page. It shows a large yellow circle for the head, two smaller black circles for the eyes, and leaves the mouth absent, creating an incomplete expression. The rendering relies on the SVG `circle` element with explicit `cx`, `cy`, and `r` attributes set inside an inline `<svg>` tag, with styling controlled via CSS and inline attributes. No JavaScript libraries or data sources are used; the visualization is purely declarative markup.

Mar 2, 2021