Sherif Halawa

@Sherifhalawa·3 public vizzes

Smiley Face Part VI

Eighteen randomly generated smiley faces fill a grid, each face varying in stroke width, eye placement, eye radius, mouth width, and mouth radius. The visualization demonstrates a modular React component architecture, where reusable components like `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` are composed to build each face. Using React 16.9 and D3 v5, the `Mouth` component employs the `d3.arc` API to create its curved path, while the `index.js` file uses D3's `range` utility to generate the face count. The faces are rendered as SVG elements within a responsive container.

Jul 23, 2020

Loading thumbnail…

Let's Make a Face Part I

This example uses raw SVG elements to construct the initial stage of a smiley face. A large yellow circle with a black stroke serves as the head, while two smaller unfilled circles represent the eyes, positioned symmetrically around the center. The SVG is rendered directly in the browser with a fixed width and height, using absolute coordinates for all shapes. The code does not employ any JavaScript libraries or dynamic data, relying solely on static markup to define the visual composition.

Jul 23, 2020

Loading thumbnail…

Hello HTML

A simple yellow face rendered as an SVG drawing, centered on a 960 by 500 pixel canvas. The concentric circles for the face, eyes, and mouth are drawn using React components and D3’s `arc` function to generate the mouth path. The code uses the React and ReactDOM libraries to mount the SVG into the page, while D3’s `arc` API defines the mouth’s inner and outer radii and angular span.

Jan 30, 2020