ahmedoury

@ahmedoury·4 public vizzes

Let's Make a Face Part I

This example shows the initial step in constructing a smiley face with SVG shapes, featuring a yellow circle outline with two black eye circles. The code manually positions these shapes using static coordinates within an SVG element, while a React app renders a simple "Hello JSX" heading. It uses React and ReactDOM from UMD builds, with the SVG markup embedded directly in the HTML file rather than generated through React components. The visualization does not yet include the mouth, as indicated by the half-finished face.

Aug 21, 2020

Loading thumbnail…

Let's Make a Face Part I

A large yellow circle rendered in SVG sits at the center of a 960-by-500 canvas, surrounded by a thick black stroke to form the base of a face. Two smaller black circles, positioned to the left and right of the center, represent eyes, leaving the mouth unfinished. The example uses inline SVG elements—`circle` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—to demonstrate a static, half-completed smiley face, with no interactive or animated behavior present.

Aug 21, 2020

Loading thumbnail…

Let's Make a Face Part I

This example shows the first step in constructing a smiley face using Scalable Vector Graphics (SVG). A large yellow circle with a black stroke forms the head, while two smaller black circles serve as eyes, positioned symmetrically around the center. The code directly manipulates SVG elements like `circle` and their attributes, such as `cx`, `cy`, `r`, `fill`, and `stroke`. Rendering is achieved through static SVG markup embedded in an HTML document, with no JavaScript libraries involved.

Aug 21, 2020

Loading thumbnail…

Untitled

A yellow circle with two black eyes sits centered on an empty SVG canvas, forming the first half of a smiley face. The main face is drawn with a 250-pixel radius, using a yellow fill and black stroke, while the eyes are smaller black circles positioned symmetrically on either side of the center. The code uses raw SVG elements, including `circle` tags, with fixed coordinates and styling set directly in the HTML. No JavaScript libraries are involved; the rendering is purely static SVG output.

Aug 21, 2020