Clemarjon Laguardia

@cjlaguardia·2 public vizzes

Lets Make Smiley Face Part II

This example shows a smiley face drawn as a scalable SVG graphic using React. The face consists of a yellow circle for the head, two black circles for eyes, and a placeholder for a mouth, all positioned dynamically relative to the window size. The code uses React's `ReactDOM.render` to mount the component, and computes geometric values like `centerX`, `centerY`, `eyeOffsetX`, and `eyeRadius` to place elements. Rendering relies on SVG primitives within a `<g>` transform, with the head radius set to `centerY - strokeWidth / 2` to fit the viewport.

Mar 21, 2021

Loading thumbnail…

Smiley Face part I

A large yellow circle with a black outline forms a smiling face, accompanied by two smaller unfilled circles that appear to represent eyes. The composition is static, showing only the initial stage of the face. The visualization is rendered as inline SVG within an HTML page, using the `<circle>` element with attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. No JavaScript or external libraries are involved; the drawing is defined entirely in the markup. This example appears to be part of a tutorial, as indicated by a linked video.

Mar 21, 2021