simbamkenya

@simbamkenya·4 public vizzes

Fork of Fork of Smiley Face Part II

A yellow smiley face with two black eyes is rendered to fill the browser window using React and SVG. The face is drawn with a large circle for the head, two smaller circles for eyes, and no mouth, with all shapes positioned relative to the window center using computed dimensions. The code uses React’s `createElement` syntax through JSX and renders directly to the DOM via `ReactDOM.render`. The viewport size is captured from `window.innerWidth` and `window.innerHeight`.

Aug 9, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This visualization uses React to render a full-screen SVG smiley face. The face is drawn with a yellow circle for the head, two dark circles for eyes, and a mouth, with dimensions calculated from the window’s inner height and width. It uses ReactDOM to mount the component into the DOM, and the SVG elements are positioned via a translation transform at the screen’s center. The code computes the head radius, eye offsets, and stroke width as constants, but does not include the mouth shape despite the title.

Aug 9, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG drawing shows a yellow face with a black outline and two simple eyes, suggesting the initial step in a guided exercise to build a smiley face. The drawing is constructed from three `<circle>` elements inside an inline `<svg>` tag: a large yellow circle for the head and two smaller black circles for the eyes, positioned using fixed coordinates. The example is a fork of a tutorial, with the HTML referencing a linked video. The plain SVG markup, without scripting or external libraries, defines the entire graphic.

Aug 9, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a simple SVG smiley face drawn directly in an HTML page, with a yellow circle for the head, two smaller circles for eyes, and a black outline. The code uses no external JavaScript libraries, relying solely on inline SVG elements and basic CSS to set the page margin to zero and hide overflow. The rendering approach is static SVG, with the circle elements positioned using cx, cy, and r attributes within a 960-by-500 pixel viewport. It serves as a minimal demonstration of embedding SVG graphics in HTML.

Aug 9, 2021