pornpat234

@pornpat234·3 public vizzes

Fork of Smiley Face Part II

This example renders a single yellow circle at the center of an SVG canvas using React. The circle’s position is computed from fixed width and height constants, and its radius is set to 30 pixels. The code uses React 16.9 via UMD builds, with ReactDOM rendering the SVG element into a root div. The implementation includes a commented-out full smiley face drawing, but the active code only displays the circle, and mouse movement events are left empty.

Apr 14, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of twenty small, static smiley faces renders in an SVG canvas. Each face consists of a yellow background circle with a black stroke, two circular eyes, and a mouth drawn with d3’s `arc` generator, creating a half-circle from inner and outer radii. The React application maps over a `d3.range(20)` array to produce these faces, with randomized eye radii for slight variation. The SVG is structured through reusable React components, including `FaceContainer` for the coordinate transform and `BackgroundCircle` for the base shape.

Apr 14, 2022

Loading thumbnail…

Smiler face part I

This example displays a static, minimalist smiley face composed of three black SVG circles nested inside a larger yellow circle with a black stroke, rendered on a 960×500 canvas. The code uses plain SVG elements—`circle` for the face and eyes—set within an HTML page that loads React 18 via a UMD script, though only the global `React` object’s existence is logged in a separate `index.js` file. No interactivity or animation occurs; it simply shows the basic geometric composition.

Apr 13, 2022