RonanJS60

@RonanJS60·4 public vizzes

I Made A Face Part I

This visualization shows the first step toward building a smiley face, displaying a large black circle outlined in yellow with two smaller yellow circles positioned as eyes. The SVG markup directly defines each shape using explicit `cx`, `cy`, and `r` attributes on `<circle>` elements, with a 960-by-500 viewport. The code computes eye placement relative to the center and stroke width, though no JavaScript libraries or data sources are used—only static, hardcoded coordinate values render the simple geometric composition.

Mar 11, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization displays a simple, stylized face created with inline SVG elements. A large black circle with a yellow stroke forms the head, while two smaller yellow circles represent the eyes. The code uses raw SVG shape tags—`circle` elements for the head and eyes—rendered directly in the HTML within an SVG container sized at 960 by 500 pixels. The layout is static, with no animation or interaction, and the design is described as halfway toward a smiley face, lacking a mouth. The example is a fork of “Let's Make a Face Part I,” sourced from v3, and uses no JavaScript libraries.

Mar 11, 2021

Loading thumbnail…

of Let's Make a Face Part I

This example shows a nearly complete smiley face drawn as a single SVG circle, with the title hinting at a step-by-step construction process. The minimal HTML and CSS set up a full-screen viewport, while the SVG element defines a 960×600 canvas and renders one circle with a radius of 200 pixels. The code uses intrinsic SVG elements rather than a JavaScript library, and the embedded YouTube video serves as a reference tutorial for building the face incrementally. No facial features or animations are present yet, leaving the face incomplete.

Mar 5, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example creates a full-screen smiley face from geometric shapes using React. The face includes a yellow circular head with a black stroke, two eyes, and a blank space where a mouth would be, all positioned relative to the window dimensions. It renders SVG elements directly through React's JSX syntax, calculating coordinates and radii from `window.innerWidth` and `window.innerHeight`. The implementation uses React 16.9.0 and ReactDOM to mount the component into the page.

Mar 5, 2021