jasandison

@jasandison·3 public vizzes

Fork of Smiley Face Part V

A modular React application renders a yellow smiley face as a static SVG graphic. The face consists of a yellow circular background with a black stroke, two black eyes positioned by offset coordinates, and a mouth drawn using a D3 arc path. The code splits components into separate ES6 module files, including FaceContainer, BackgroundCircle, Eyes, and Mouth, and uses React Fragments to group the eye circles. D3 v5 provides the arc generator for the mouth’s shape, while React manages the component hierarchy and props for all visual parameters.

Nov 9, 2021

Loading thumbnail…

Smiley Face Part II

This example shows a smiley face composed of three React components: a yellow background circle, two black eyes, and a curved mouth. The components accept parameters for radius, offsets, and stroke width, making the face customizable. The mouth is drawn using the `d3.arc()` API with inner and outer radii and specified start and end angles. The entire SVG is rendered with React 16.9 and D3 v7, positioned via a group transform at the center of the viewport.

Nov 9, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a simple SVG smiley face drawn on a yellow circle with black stroke, featuring two smaller circles for eyes. It serves as a minimal demonstration of embedding SVG elements directly within an HTML page alongside React. The code uses React and ReactDOM from external UMD scripts, while the face itself is rendered with raw SVG tags rather than React components. The page loads a bundle.js file and uses standard SVG circle elements positioned at fixed coordinates, with the body styling removing margins and hiding overflow.

Nov 9, 2021