jamesguerrier

@jamesguerrier·4 public vizzes

Fork of Let's Make a Face Part I

This example uses React to render a yellow smiley-face SVG, with the face created from three circles: a large one for the head and two smaller ones for the eyes. The code defines constants for width, height, center coordinates, stroke width, and eye offsets, then uses ReactDOM to mount the SVG into the DOM. The rendering uses SVG elements with attributes for positioning and styling, demonstrating a declarative approach with React’s `createElement` pattern.

Nov 18, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A React-driven SVG smiley face fills the browser window, with its yellow circular head centered and black outline sized to the viewport height. Two fixed eye circles are positioned symmetrically on either side of the face’s center, while the mouth remains omitted from the rendering. The example uses React 16.9 and ReactDOM to generate SVG elements, computing coordinates from `window.innerWidth` and `window.innerHeight`, with stroke and eye offsets stored as constants. The visualization demonstrates a simple component-based approach to drawing basic geometric shapes without additional data sources or interaction.

Nov 17, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and SVG. The face is composed of a yellow circle with a black stroke for the head, plus two smaller circles for the eyes, all positioned relative to the center of the window. The React component computes dimensions from `window.innerWidth` and `window.innerHeight`, uses JSX to create SVG elements, and applies a `transform` to center the drawing. The code includes a commented-out static SVG version, but the active implementation uses ReactDOM to mount the dynamic visualization.

Nov 17, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays a simple yellow smiley face drawn in an SVG canvas. The graphic consists of a large yellow circle for the face and two smaller black circles for the eyes, all rendered via the embedded SVG markup within the HTML page. The code uses inline CSS for basic page styling and relies on native SVG elements like `circle` with properties such as `cx`, `cy`, `r`, `fill`, and `stroke` to define the shapes, with the data source being the static code itself.

Nov 16, 2022