Steffen

@SteffenOnTheHub·3 public vizzes

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered in an SVG that fills the entire browser window, with its size and position calculated from the window’s current width and height. The face is constructed using React components, where the head is a circle with a yellow fill and black stroke, and the eyes are two smaller circles. The smile is generated by applying a D3 arc function, which creates a path with a specified inner radius, outer radius, and angular range. The code uses React 16, ReactDOM, and D3 7, with the D3 arc API providing the geometric path for the mouth.

Jan 25, 2025

Loading thumbnail…

Fork of Smiley Face Part II

This interactive visualization displays a smiley face that adapts to the browser window size. The face consists of a yellow circle with black stroke and two eyes, positioned responsively based on window dimensions. Built with React and ReactDOM, the code uses SVG elements to render the shapes, with the main face centered via a transform group. The example demonstrates reactive sizing, where the face radius is calculated from the window height minus half the stroke width.

Jan 25, 2025

Loading thumbnail…

Fork of Hello HTML

This example displays a minimal SVG smiley face—a large yellow circle outlined in black, with two smaller black circles for eyes—centered on a 960-by-500 canvas. It is built from a plain HTML page that loads React 16.9.0 from a CDN and logs the React object to the console, but the visual itself is hand-coded SVG without any React components or data manipulation. The code uses a basic `<svg>` element with hard-coded circle coordinates and styling, showing the simplest possible static vector rendering.

Jan 25, 2025