Mohamed

@Mohamedlaminedev·4 public vizzes

Fork of Smiley Face Part II

A fork of the classic “Smiley Face Part II” example, this React-based visualization renders a yellow smiley face with black-outlined eyes, drawn as simple SVG circles. The face is constructed using static SVG elements—a large circle for the head and two smaller circles for the eyes—positioned on a 960×500 canvas. The code loads React and ReactDOM from a CDN and renders the SVG structure directly into the DOM, with the source HTML containing a commented-out reference to the original implementation. No interactive behavior or data binding is present, making it a minimal showcase of declarative SVG rendering in React.

Aug 25, 2025

Loading thumbnail…

Fork of Let's Make a Face Part II

This example shows a fixed SVG face with two large eyes inside a yellow circular head. The face is rendered statically without any interactive behavior. The implementation uses React 16.9.0, loaded via a UMD build from unpkg, and plain SVG elements with hardcoded coordinates and stroke widths. The code logs the React object to the console but does not apply any data-driven or dynamic updates, making it a minimal demonstration of combining React with SVG markup.

Aug 25, 2025

Loading thumbnail…

Fork of Hello HTML

This visualization shows a simple smiley face composed of three circles: a large yellow head with a black stroke, and two smaller black eyes. The entire graphic is drawn as static SVG elements directly in the HTML markup. The example uses React 16.9.0, loaded via a UMD script from unpkg, though the code only logs the React object to the console and does not leverage React for rendering. The SVG canvas is 960 by 500 pixels, with the face centered and the eyes positioned symmetrically.

Aug 25, 2025

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a responsive smiley face that fills the browser window. It uses React to define an SVG scene, with circles for the head, eyes, and mouth positioned relative to the center coordinates. The face scales dynamically to the viewport size, as the head radius is derived from the window height minus the stroke width. The code imports React and ReactDOM, and uses JSX to create the SVG elements.

Aug 25, 2025